How to Make Image Large on Mouseover

Enlarge Image with CSS3

You might have seen somewhere that when you bring your mouse pointer on the image, it becomes large. It is a good technique to focus on it. This is made with the help of CSS3. Mouseover event is applied by using “:hover” which makes an image to be large on mouseover. Below is the code and example.

HTML:

<img scr=”image_url” width=”128″ height=”128″>

 

CSS:

img {
transition: transform 1s;
-webkit-transition: transform 1s;
}
img:hover {
transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
}

 

Example:

Mouseover Me

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.