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: ''
}

当我将鼠标悬停在img上时创建叠加文本

1 个答案: