2020-05-28 - How to scale an image on mouseover using CSS?

Image scaling effect is an application effect that scales the image when the mouse is hovered or clicked. This effect is mainly used on websites. This effect is useful in situations where we want to display user details on an image.
There are two ways to create mouseover effects.

Using JavaScript

Using CSS

In this article, we will see how to use CSS to achieve this effect. This article contains two parts of code. The first part contains HTML code and the second part contains CSS code. HTML code: In this article, we will use HTML to create the basic structure of image scaling on hover effect.

" "div> " //media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt="Geeks Image" />

CSS Code: In this section, we will use some CSS properties to scale the image on mouseover. To create the scaling effect we will use the two properties transition and transform.

Full code: In this article, we will combine the above two parts and use HTML and CSS to create an image scaling effect on mouseover. Example: