Question

当我在图片上移动鼠标时，我希望图片放大，但尺寸不会增加，图片上方的文字会略微向上移动，如下例所示： https://vikingco.com/en/mobile-vikings/

我已经尝试浏览源代码，但我找不到解决方案。

Answer 1

他们已经完成了CSS3过渡。从他们的网站上取一些位，这显示了背景图像的方法，然后可以应用于字幕等。

鉴于此HTML：

<article class="grid-50 tablet-50 phablet-100 item-holder">
  <a href="/en/mobile-vikings/news/new-website-same-spirit/" class="item" style="background-image:url(https://s3-eu-west-1.amazonaws.com/pulse-be-media/content/uploads/2015/04/Pulse-2.jpg);"></a>
  <div class="caption">
    <span class="label action">Mobile Vikings</span>
    <span class="label action">Viking Talk</span>
    <span class="label action">VikingCo</span>
    <h3><a href="/en/mobile-vikings/news/new-website-same-spirit/">New website, same spirit</a></h3>
   </div>
</article>

他们将转换应用于.item，它将为所有CSS属性设置动画：

.pulse .item-holder .item {
  float: left;
  width: 100%;
  height: 100%;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  position: relative;
  -moz-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  -webkit-transition: all 150ms ease-in;
  transition: all 150ms ease-in;
  -moz-transform: scale3d(1,1,1);
  -ms-transform: scale3d(1,1,1);
  -webkit-transform: scale3d(1,1,1);
  transform: scale3d(1,1,1);
  filter: alpha(Opacity=80);
  opacity: .8;
}

这个:hover伪类定义了一个由上述过渡动画的缩放变换：

.pulse .item-holder:hover .item {
  -moz-transform: scale3d(1.1,1.1,1);
  -ms-transform: scale3d(1.1,1.1,1);
  -webkit-transform: scale3d(1.1,1.1,1);
  transform: scale3d(1.1,1.1,1);
  filter: alpha(enabled=false);
  opacity: 1;
}

整个事情需要包装在一个定义overflow:hidden样式的容器中。

这似乎足够合理，因此您可以将其用作自己代码的基础。这是一个小提琴，显示它使用图像：

http://jsfiddle.net/q32stv45/1/

如何在悬停时转换图片

1 个答案: