悬停时缩放图像

Question

当我将鼠标悬停在其上时,如何在社交Feed中制作图像以进行缩放.

类似于本网站左侧的Instagram Feed .

我在悬停css中试过这个:

opacity: 0.5; 
filter: alpha(opacity=50);

但我无法让它变焦.

Answer 1

你可以用它.

.item {
  position: relative;
  
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}

.item img {
  width: 500px;  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="item">
  <img src="http://www.joshuacasper.com/contents/uploads/joshua-casper-samples-free.jpg" alt="pepsi" width="540" height="548">
  
  
</div>