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.

.geeks img { wi wi dth: 100%; transition: 0.5s all ease- in-out; }

.geeks:hover img { transform: scale(1.5); }

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:

The above is the detailed content of 2020-05-28 - How to scale an image on mouseover using CSS?. For more information, please follow other related articles on the PHP Chinese website!