我有一个带有颜色叠加层的图像,我想在用户将鼠标悬停在图像上时在图像上添加缩放。
我试图在没有 JQuery 的情况下实现这一点,但为了获得我不介意使用 JQuery 的结果。
提前致谢
HTML:
<div class="rss-output">
<div class="body"> <a target="_blank" href="#">
<div class="overlay-feed"></div>
<div class="imagefix zooming" style="float:none;">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
CSS:
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position: relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 2;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}
最佳答案
使用下面的css会做缩放效果:
.overlay-feed:hover + div.imagefix img{
transform: scale(2);
-webkit-transform: -webkit-scale(2);
}
检查更新的 Fiddle
关于javascript - 悬停缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31176938/