在 div 中移动(转换：翻译 (x， y)) 文本 (<p>)，使其看起来像隐藏在同一个 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

您可以在Div上添加overflow: hidden;。另外，我重新安排了您的课程并删除了一些重复的道具。

.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>

编辑确保检查小提琴的代码中的Aboslute解决方案。主要更改是我删除了flex及其属性，还将边距和填充在<p>上。

Answer 2

添加溢出：隐藏;到您的.rectangulo_categoria类

.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; // this is your solution
}