jquery - 当我将鼠标悬停在 img 上时创建带有文本的叠加层

Question

我的 HTML 包括以下内容:

<section class="row-1">
  <div class="column-12"></div>    
</section>

在 SASS 中，我进行了设置，以便当我将鼠标悬停在 .column-12 上时，背景图像将替换为背景颜色。这是我的 SASS:

.row-1 .column-12
  background-image: url(/images/image-yellow.jpg)
  position: relative
  &:hover
   background-color: rgba(76,193,171,1)
  &:before
   position: absolute
   top: 0
   right: 0
   bottom: 0
   left: 0
   background-color: inherit
   content: ''

除了删除背景图像并更改背景颜色(这已经很好了)之外，当我将鼠标悬停在 .column-12 元素上时，我还想让文本从左上角滑入。所以最后，当你将鼠标悬停在图像上时，背景颜色应该是 rgba(76,193,171) 并且应该有从左侧滑入的文本。

我试了很多方法，还是没有成功。任何帮助都会很棒。即使文字只是淡入……也没关系。

Answer 1

您可以使用 transform: translateX(-100%); 为您的文本节点然后使用过渡到 transform: translateX(0); 悬停在您的 .column-12。另外，添加一个 overflow:hidden; 这样你就只能在 .column-12 div

中看到它

查看此 fiddle举个例子。

HTML

<section class="row-1">
  <div class="column-12">
    <h3>
       Text text text.
    </h3>
  </div>
</section>

CSS

.row-1 .column-12 {
  background-image: url(https://placehold.it/200x200);
  position: relative;
  overflow:hidden;
  width: 200px; /*for demo*/
  height: 200px; /*for demo*/
}

.row-1 .column-12 h3 {
  transform: translateX(-100%);
  transition: all 350ms ease;
}

.row-1 .column-12:hover {
  background: rgba(76, 193, 171, 1)
}

.row-1 .column-12:hover h3 {
  transform: translateX(0);
}

.row-1 .column-12:before {
  position: absolute top: 0 right: 0 bottom: 0 left: 0 background-color: inherit content: ''
}