Question

我正在尝试像这样-> https://victorthemes.com/themes/glazov/portfolio-grid/

为悬停图像上的文本设置CSS过渡

我试图用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>

请给我一些提示。

Answer 1

我使用transform: translate();移动对象。与立方贝塞尔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>

Answer 2

好的，首先，我建议对过渡元素使用“ 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。

Answer 3

要使图像变暗，您需要更改其不透明度。要缩放图像，请使用缩放转换，并移动标题文本，您需要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>

悬停图像上的文本过渡

3 个答案: