CSS(或非)动画图像在鼠标悬停时变得透明，然后再次变得不透明

Question

嘿伙计们要问了，我必须制作一张有点透明的图片(比如不透明度 0,4)，然后它的大小增加 2 倍，然后再次变得不透明(不透明度 1) 并且文本一直没有改变它的位置。

img  {
         opacity: 1;
         width: 250;
         }
         img:hover {
    opacity: 0.4;
    filter: alpha(opacity=40);
        width: 500px; 
        transition-property: width;  
  transition-duration: 4s;

                         }

我只为尺寸增加和透明度制作了一个 css 代码，但是不知道如何在我的 4 秒动画后再次使它的不透明度为 1，也不知道如何在图像尺寸增加后使文本保持在相同的位置。

Answer 1

这是一种解决方案，但如果没有更多信息，很难为您提供最佳答案。您只能使用 css 对悬停应用效果，这意味着一旦图片不再悬停，图片将恢复正常。如果您想要一个在 4 秒后自动恢复正常的解决方案，那么您应该使用 javascript。

.wrapper {
  width: 100%;
}
figure {
  display: inline-block;
  width: 120px; /* It has to be bigger than twice the size of your picture if you don't want the text to move */
}
img {
  width: 50px;
  height: auto;
  -webkit-transition: width, 0, 4s;
  transition: width, 0, 4s;
}
img:hover {
  width: 100px; /* twice the original size */
  opacity: .4;
}
.text {
  display: inline-block; /* so that your text is aligned with picture */
  vertical-align: top; /* so that your text doesn't move */
}

<div class="wrapper">
  <figure>
    <img src="http://lorempixel.com/100/100">
  </figure>
  <div class="text">
    Some text...
  </div>
</div>