时间戳

首页 > 解决方案 > 悬停图像上的文本过渡

css - 悬停图像上的文本过渡

问题描述

我正在尝试像这样在悬停图像上的文本上设置 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>

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

标签： cssimagehoveroverlay

解决方案

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

推荐阅读