How to Make Image Large on Mouseover

19 June 2013

CSS Tricks, WebMasters

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
, , , , ,

No comments yet.

Leave a Reply

*