将文本移出图像后如何隐藏文本？

Question

我有一些在图像上标有名称和标题的员工图块。在鼠标悬停时，我希望图像稍微缩放，文本从图像上滑落。我已经能够制作所有动画，但是当文本从图像上滑落时，我无法隐藏它。

我尝试了overflow: hidden 的各种变体，并弄乱了white-space 和text-overflow，但没有运气。

我在这里创建了一个 CodePen：https://codepen.io/iisrael/pen/EBjmPW

这里是 HTML

<div class="speaker-tile-grid">         
    <div class="speaker-tile">
        <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px"> 
        <h3>Person #1</h3>
        <h4>They do stuff</h4>
    </div>
</div>

这是 CSS：

.speaker-tile-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px, 300px));
  grid-template-rows: repeat(auto-fit,minmax(200px, 300px));
  grid-gap: 1em;
  margin: 0;
}

.speaker-tile {
    overflow: hidden!important;
}

.speaker-tile img {
    transition: 750ms;
}

.speaker-tile:hover img {
    transform: scale(1.05);
}

.speaker-tile h3 {
    position: absolute;
    bottom: 45px;
    background-color: #ff6600;
    color: white;
    padding: 5px 10px 10px 10px;
    transition: 750ms;
}

.speaker-tile:hover h3 {
    transform: translateX(-100%);
}

.speaker-tile h4 {
    position: absolute;
    bottom: 25px;
    background-color: #313131;
    color: white;
    padding: 4px 10px;
    transition: 750ms;
}

.speaker-tile:hover h4 {
    transform: translateX(-100%);
}

我需要知道如何在文本离开图像时隐藏它。 text-overflow: Clip 或 overflow: hidden 或其他东西，因为这些对我不起作用。非常感谢任何帮助。

Answer 1

您可以做的是将每个员工的详细信息（h3 和 h4 元素）包装在一个名为“详细信息”的 div 中，并创建一个新的 css 处理程序来更改这些详细信息 div 在悬停时的不透明度扬声器磁贴 div 如下：

而不是仅仅移动对象并更改不透明度，如果您希望它具有截止效果，您可以保留“详细信息”div，但删除以前的 css 并用下面的 css 替换它。

您可以使用 flexbox，而不是为 speaker-tile-grid div 使用网格容器，因为当您使用网格显示时，它会限制您隐藏 h3 和 h4 元素，因为您绝对定位它们。

通过使用 flexbox 显示，我们的“details” div 只是固有地堆叠在 img div 之上，img div 全部包裹在“speaker tile” div 中作为文字块。因此，为左侧的“细节”设置动画现在将创建截止效果，因为它与“speaker tile”div 并在其边界之外移动，而不是绝对定位，不受父 div 边界的影响。

<div class="speaker-tile-grid">
  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>

  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>

  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>
</div>

.speaker-tile-grid {
  display:flex;
  flex-direction: row;
  margin: 0;
}


.speaker-tile {
  margin: 0px 15px;
    overflow: hidden!important;
}

.speaker-tile img {
    transition: 750ms;
}

.speaker-tile:hover img {
    transform: scale(1.05);
}

.speaker-tile h3 {
  width: 50%;

  margin: 0;

    background-color: #ff6600;
    color: white;
    padding: 5px 10px 10px 10px;
    transition: 750ms;
}

.speaker-tile:hover h3 {
    transform: translateX(-100%);
}

.speaker-tile h4 {
  width: 65%;

  margin:0;

    background-color: #313131;
    color: white;
    padding: 4px 10px;
    transition: 1150ms;
}

.speaker-tile:hover h4 {
    transform: translateX(-100%);
}

Answer 2

我通过将<h3> 和<h4> 元素包装在它们自己的<div> 中解决了这个问题。然后我将转换更改为发生在 <div>s 而不是 <h3> 和 <h4> 标签上。

这是最终的 HTML

<div class="the-grid">
    <div class="the-tile">
        <img src=" # ">
        <div class="the-name">
            <h3>Name Here</h3>
        </div>
        <div class="the-role">
            <h4>Role Here</h4>
        </div>
    </div>
</div>

这是最终的 CSS：

.the-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px, 300px));
  grid-template-rows: repeat(auto-fit,minmax(200px, 300px));
  grid-gap: 20px;
  margin: 0;
}

.the-tile {
    overflow: hidden!important;
}

.the-tile img {
    transition: 750ms;
}

.the-tile:hover img {
    transform: scale(1.05);
}

.the-tile h3 {
    position: absolute;
    bottom: 35px;
    background-color: #ff6600;
    color: white;
    padding: 10px;
}

.the-tile h4 {
    position: absolute;
    bottom: 10px;
    background-color: #313131;
    color: white;
    padding: 5px 10px;
}

.the-tile .the-name, .the-tile .the-role {
    transition: 1s;
}

.the-tile:hover .the-name, .the-tile:hover .the-role {
    transform: translateX(-100%);
}