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显示器，我们的“详细信息” div固有地堆叠在img div上方，而img div则全部包裹在“ speaker tile” div中，作为文字块。因此，为左侧的“细节”设置动画效果将立即产生截止效果，因为该效果与“扬声器磁贴” 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>而不是<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%);
}

将文字移离图片后如何隐藏文字？

2 个答案: