I am trying to transform my image back to original size after user hover out of my image..Not sure what to do here..
MY css
//doesn't work
.imgDiv img{
-webkit-transform:scale(1, 1);
-moz-transform:scale(1, 1);
-o-transform:scale(1, 1);
-ms-transform:scale(1, 1);
transform:scale(1, 1);
}
//enlarge the image but don't know how to shrink them back
.imgDiv:hover img{
-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);
}
html...
<div class='imgDiv'>
<img src='a.jpg' />
<img src='b.jpg' />
<img src='c.jpg' />
<img src='d.jpg' />
</div>
Thanks for the help....
Just remove all the transform
properties from the original declaration. Since the images are, by default, scaled to 1
, you don't need to declare that. Anything that you set in an element's :hover
pseudo class is reverted to its default when the mouse is removed.
Here is an example.
Here's the final CSS:
.imgDiv:hover img{
-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);
}
Of course, if you were trying to apply this to each image, then you'd still remove the .imgDiv img
declaration and change .imgDiv:hover img
to .imgDiv img:hover
.
Here is an example of that in action.
Just put the :hover
on your images
.imgDiv img:hover{
-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);
}
Adding a transition you got a nice transition effect on hover:
.imgDiv img:hover{
-webkit-transform:scale(1.15, 1.15);
-moz-transform:scale(1.15, 1.15);
-o-transform:scale(1.15, 1.15);
-ms-transform:scale(1.15, 1.15);
transform:scale(1.15, 1.15);
}
.imgDiv img {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.