我的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），并且文本应从左侧滑入。
我以许多不同的方式上当，但仍然没有成功。任何帮助将是巨大的。即使文字消失了，也没关系。
您可以transform: translateX(-100%);为您使用文本节点，然后在transform: translateX(0);上悬停时使用过渡.column-12。另外，添加一个，overflow:hidden;这样您就只能在.column-12div中看到它
有关示例，请参见此小提琴。
的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: ''
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句