html - 调整具有放大效果的图像和文本 block

Question

我试图将文本放在图像的底部，而图像 zoom-in 效果可以通过将鼠标放在文本+图像上来触发。此外，图像高度应保持不变或至少在其占位符内，而不是超过文本。

注意:图片有叠加层，但目前无处不在:(

我应该如何进行？我卡住了。 <强> http://jsfiddle.net/6bgxn2s4/

HTML:

.zoom-group{
  overflow:hidden;
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
}
.zoom-text {
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.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: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"></div>
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>

Answer 1

问题是 transform:scale 总是与其他容器重叠。因为它不会改变元素的实际高度和宽度。

解决方法可能是您在悬停时更改宽度:

.zoom-group{
  border: 1px solid #000000; 
  display: block; 
  position: relative; 
  text-align: center;
  width:250px;
}

.zoom-block {
  position:relative;
  height:250px;
  width:250px;
  overflow:hidden;
  left:0;
  right:0;
  margin:auto;
}

.zoom-text {
  text-align: left;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  background-color: rgba(0,0,0,0.3);
}
.zoom-bottom {
  color: #444;
}
.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;
  display:block;
   width:250px;
}
.zoom-link {
    display: block;
}
.zoom-group:hover .zoom-block 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"></div>
    
    
  </div>
  <div class="zoom-bottom">
    This is the title and I would like to have the zoom effect called when I place my mouse here too! 
  </div>
 </a>
</div>