[英]How to create hover out effect using css3
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 我的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... 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. 只需从原始声明中删除所有transform
属性即可。 Since the images are, by default, scaled to 1
, you don't need to declare that. 由于图像默认情况下缩放为1
,因此您无需声明它。 Anything that you set in an element's :hover
pseudo class is reverted to its default when the mouse is removed. 删除鼠标时,您在元素的:hover
伪类中设置的所有内容都将恢复为其默认值。
Here's the final CSS: 这是最终的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
. 当然,如果尝试将其应用于每个图像,则仍将删除.imgDiv img
声明并将.imgDiv:hover img
更改为.imgDiv img:hover
。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.