[英]Zoom effect on hover with image opacity
I got this working for image zoom in with link on the entire div but without the opacity. 我使用了整个div上的链接进行图像放大,但是没有不透明度。 The moment I add this code in line 14-16, it ceases to work for obvious reason: 在第14-16行中添加此代码后,由于明显的原因,它停止工作:
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
HTML 的HTML
<div class="zoom-group">
<a class="zoom-link" href="#" >
<div class="zoom-block">
<img src="http://placehold.it/250x250" />
<div class="zoom-text">
Hello
</div>
</div>
</a>
</div>
CSS: CSS:
.zoom-group{
overflow:hidden;
border: 1px solid #000000;
display: block;
position: relative;
text-align: center;
height: 250px;
width: 250px;
}
.zoom-text {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
}
.zoom-block img{
max-width: 100%;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.zoom-link {
display: block;
}
.zoom-block img:hover{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
How should I make this work? 我应该如何做这项工作? I do need the opacity layer and the zoom-in functionality plus the entire div to be clickable. 我确实需要不透明层和放大功能以及整个div才能单击。
The img:hover
cannot happen cause of the overlaying DIV. img:hover
不会发生重叠DIV的原因。
Target the overall parent instead and than traverse to the image: 定位到整个父对象,而不是遍历图像:
Simply change your last statement from to .zoom-block img:hover{
.zoom-group:hover img{
只需将您的最后一条语句从更改为.zoom-block img:hover{
.zoom-group:hover img{
.zoom-group{ overflow:hidden; border: 1px solid #000000; display: block; position: relative; text-align: center; height: 250px; width: 250px; } .zoom-text { position: absolute; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; } .zoom-block img{ max-width: 100%; -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; } .zoom-link { display: block; } .zoom-group:hover img{ /**/ -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); }
<div class="zoom-group"> <a class="zoom-link" href="#" > <div class="zoom-block"> <img src="http://placehold.it/250x250" /> <div class="zoom-text"> Hello </div> </div> </a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.