html - 尝试在悬停图像上添加比例效果

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>