我的选择

Question

我在图片上使用了一些叠加层，这就是为什么我没有得到理想的结果我试着让图像在悬停时放大

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

我的CSS

.overlay{
 background-color:rgba(0,0,0,0.6);
 height:100%;
 width:100%;
 position:absolute;
 transition:all 0.5s ease-in-out;
}
.overlay:hover{
  background-color: rgba(0,0,0,0.0);
}
.overlay-text{
 padding-top: 150px;
 color: #fff;
 opacity: 1 !important;
}

我试图让图像缩放

 .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而不是图像。任何有效的方式？

Answer 1

您可能希望将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{
 background-color:rgba(0,0,0,0.6);
 height:100%;
 width:100%;
 position:absolute;
 transition:all 0.5s ease-in-out;
}
.overlay:hover{
  background-color: rgba(0,0,0,0.0);
}
.overlay-text{
 padding-top: 150px;
 color: #fff;
 opacity: 1 !important;
}
i was trying to make images zoom

 .img-zoom{
   height:100%;
   width:100%;
   transition:all 1s ease-in-out

 }
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);
  }

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

我的选择

为了减少标记，我会使用伪元素代替这个功能，因为它比使用dom中的'real'元素要快得多。我还会设置高度和宽度（如果可能），而不是使用'scale'转换来减少/删除最初需要的供应商前缀。

.container {
  margin: 0 auto;
  text-align: center;
  background: lightgray;
  position: relative;
  transition: all 0.6s;
}
.container:before {
  content: "EXAMPLE";
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  font-size: 50px;
  line-height: 300px;
  color: white;
  opacity: 1;
  transition: all 0.6s;
}
.container:hover:before {
  opacity: 0;
}
img {
  height: 300px;
  width: 300px;
  transition: all 0.6s;
}
.container:hover img {
  height: 450px;
  /*Alternatively, you could 'scale' by setting height & width instead*/
  width: 450px;
}

<div class="container">
  <img src="http://placekitten.com/g/300/300" />
</div>

Answer 2

为什么不给你的图像一个id或类，然后使用该类的:hover而不是整个div

想要在悬停时进行图像缩放

2 个答案:

我的选择