Html 要在悬停状态下进行图像缩放吗

我在图像上使用了一些覆盖，这就是为什么我没有得到想要的结果 我试着让图像在悬停状态下放大

  <div class="col-lg-3 text-center img-zoom">
    <div class="overlay">
      <h3 class="overlay-text">Menswear</h3>
    </div>
    <img src="http://themenectar.com/demo/salient-ecommerce/wp-content/uploads/2014/12/shutterstock_165191423-600x600.jpg"alt="Menswear">
  </div>

我试着让图像缩放

 .img-zoom{
   height:100%;
   width:100%;
   transition:all 1s ease-in-out

 }
 .img-zoom: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而不是图像。有什么有效的方法吗？

为什么不给图像一个id或类，然后在该类上使用

：悬停
，而不是整个div
您可能希望将css选择器更改为

 img{
    transition:all 0.5s ease-in-out;
  }
 .img-zoom: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);
  }

因此，不是在整个容器上添加刻度，而是只在img本身上发生。我还包括了图像上的
ease-in-out
转换：


.overlay{
背景色：rgba（0,0,0,0.6）；
身高：100%；
宽度：100%；
位置：绝对位置；
过渡：所有0.5s缓进缓出；
}
.覆盖：悬停{
背景色：rgba（0,0,0,0.0）；
}
.叠加文本{
填充顶部：150px；
颜色：#fff；
不透明度：1！重要；
}
我试着让图像缩放
.img变焦{
身高：100%；
宽度：100%；
过渡：所有1都易于输入输出
}
img{
过渡：所有0.5s缓进缓出；
}
.img缩放：悬停img{
-webkit转换：缩放（1.25）；/*Safari和Chrome*/
-moz变换：缩放（1.25）；/*Firefox*/
-ms变换：比例（1.25）；/*IE 9*/
-o变换：比例（1.25）；/*Opera*/
转换：比例（1.25）；
}

男装
你的例子实际上对我很有用。你用的是什么浏览器？它在这里也可以正常工作，但它可以缩放整个div，即使我把image类放在img标记中，在这种情况下，只需将您的选择器更改为使用
.img zoom img
，它会将转换应用于图像而不是整个容器。我很欣赏您的工作，但问题是您的css正在工作，但现在当光标悬停时，图像从div中出来。有没有什么方法可以让容器包装放大的图像？你可以在容器上隐藏溢出？或者让我编辑以包含不同的方法。
 img{
    transition:all 0.5s ease-in-out;
  }
 .img-zoom: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);
  }