具有图像不透明度的悬停缩放效果

Question

JSFIDDLE演示

我使用了整个div上的链接进行图像放大，但是没有不透明度。 在第14-16行中添加此代码后，由于明显的原因，它停止工作：

  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;

的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：

.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);
}

我应该如何做这项工作？ 我确实需要不透明层和放大功能以及整个div才能单击。

Answer 1

img:hover不会发生重叠DIV的原因。
定位到整个父对象，而不是遍历图像：

只需将您的最后一条语句从.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>