html - 在一个 div 中移动 (transform : translate (x, y)) 文本 () 使其看起来像是隐藏在同一个 div 中

Question

基本上我有一个 div，当鼠标悬停在它上面时，文本会向右移动。我想实现一些效果，就好像文本在向右移动时丢失在 div 中一样。

.rectangulo_categoria {
  border-radius: 34px;
  border: 2px solid red;
  width: 195px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
}

.rectangulo_categoria:hover .texto_engranen_1 {
  transform: translate(168px, 0px);
  opacity: 0;
}

.texto_engranen_1 {
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  font-size: 12px;
  width: auto;
  font-weight: 400;
  pointer-events: none;
  line-height: 1;
  transition: 0.5s all ease-out;
  opacity: 1;
  color: #343434;
}

<div class="rectangulo_categoria" mdbWavesEffect>
  <p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>

这是我的完整代码:

https://jsfiddle.net/te0p2fqb/

Answer 1

您可以添加 overflow: hidden;在分区上。我还重新安排了您的类(class)并删除了一些重复的 Prop 。

.rectangulo_categoria {
  border-radius: 34px;
  border: 2px solid red;
  width: 195px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.texto_engranen_1 {
  line-height: 1;
  z-index: 1;
  font-size: 12px;
  width: auto;
  font-weight: 400;
  pointer-events: none;
  transition: 0.5s all ease-out;
  opacity: 1;
  color: #343434;
}

.rectangulo_categoria:hover .texto_engranen_1 {
  transform: translate(168px, -50%);
  opacity: 0;
}

<div class="rectangulo_categoria" mdbWavesEffect>
  <p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>

编辑请务必检查 fiddle 上的代码用于绝对解决方案。主要变化是我删除了 flex 及其属性，还重置了 <p> 上的边距和填充。 .