尝试在悬停图像上添加缩放效果

Question

希望您一切都好。

我正在尝试为网站第一部分中提供的图像添加缩放效果：http://www.esportbooks.com/esports-news/

事实上，我已经在下面的“新闻”部分中实现了这种效果，如果将鼠标悬停在图像上，效果已经到位，我将使用CSS来创建效果。

唯一的是，我不知道如何获得CSS样式的确切名称来在前3张图像上复制这种效果，我尝试了几件事，但没有任何作用。

有人可以帮我找出来吗？

非常感谢

Answer 1

您可能正在寻找的是CSS属性transform: scale()

您可以查看下面的示例：

*, *::before, *::after{
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}

html, body{
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  font-weight: 300;
  height: 100%;
  color: #fff;
}

.container{
  width: 1024px;
  max-width: 100%;
  margin: auto;
  display: block;
  text-align: center;
}

figure{
  width: 400px;
  height: 300px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: 5px solid #fff;
  box-shadow: 0 0 5px #ddd;
  margin: 1em;
}

figure img{
	transition: all .3s ease-in-out;
	transform: scale(1);
}

figure:hover img{
	transform: scale(1.2);
}

<div class="container">
  <figure>
    <img src="http://placeimg.com/400/300/any" alt="Thumb" width="400" height="300" />
  </figure>
  
  <figure>
    <img src="http://placeimg.com/400/300/nature" alt="Thumb" width="400" height="300" />
  </figure>
</div>

Answer 2

在您的CSS文件中添加以下CSS代码：

   .fusion-image-wrapper {
      transform: scale(1);
      -webkit-transform: scale(1);
      transition: all .5s;
      -webkit-transition: all .5s;   
   }
   .fusion-post-wrapper:hover .fusion-image-wrapper {
      transform: scale(1.7);
      -webkit-transform: scale(1.7);
   }