悬停图像上的文本过渡答案

【问题标题】：Text transition on hover image悬停图像上的文本过渡
【发布时间】：2018-11-07 20:39:36
【问题描述】：

我正在尝试像这样在悬停图像上的文本上设置 css 过渡 -> https://victorthemes.com/themes/glazov/portfolio-grid/

我尝试使用cubic-bezier() 函数执行此操作，但没有结果。

这是我的代码。

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>

请给我一些提示如何做到这一点。

【问题讨论】：

您在寻找哪种效果？缩放图像？移动文本？包裹不透明度？
我正在寻找移动文本效果。

标签： css image hover overlay

【解决方案1】：

要使图像变暗，您需要更改它的不透明度。要缩放图像，请使用缩放变换并移动标题文本，您需要 translateX 变换。应用这些 css 样式和它们各自的过渡（您需要在图像和文本中进行过渡），然后剩下以下内容：

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  background: black;
  height: 200px;
  width: 257px;
  overflow: hidden;

}
.img__img {
    opacity: 1;
    transition: all 0.2s;
}
.img__description {
    position: absolute;
    color: #fff;
    transition: all .2s;
    left: 15px;
    right: 0;
    bottom: 15px;
    transform: translateX(-100%);
}

.img__wrap:hover .img__img {
    opacity: 0.5;
    transform: scale(1.2);
}
  
.img__wrap:hover .img__description {
    transform: translateX(0);
}

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>

【讨论】：

【解决方案2】：

我使用transform: translate(); 来移动对象。使用cubic-bezier here 来实现完美的动画效果。但是我使用了您在示例中发布的网站上的相同内容。我还删除了opacity、visibility

* {
  margin: 0;
  padding: 0;
  border: 0;
}


.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  transform: translateX(-100%);
  transition: all 600ms cubic-bezier(0.645, 0.045, 0.095, 1.08);
}

.img__wrap:hover .img__description {
  transform: translate(0);
}

<div class="img__wrap">
  <img class="img__img" src="http://placehold.it/257x200.jpg" />
  <p class="img__description">Teext.</p>
</div>

【讨论】：

【解决方案3】：

好的，首先，我建议对过渡元素使用“all”，而不是为要过渡的所有属性定义相同的值。

transition: all .2s;

其次，让我们正确处理贝塞尔曲线。我认为这已经足够接近了：

cubic-bezier(1.000, 0.215, 0.355, 0.990)

所以转换的适当性应该是这样的：

transition: all .2s cubic-bezier(1.000, 0.215, 0.355, 0.990);

对于文字动画，我建议使用animate.css 并使用fadeInLeft。

【讨论】：