Question

我有一个col-md-4，里面我有一个figure和一个figcaption，hover动作应该显示带有两个按钮的figcaption，效果是工作，但figcaption溢出图像宽度。有什么建议吗？

请注意，当我将鼠标移到空白区域时，效果会继续有效，只有当我将鼠标悬停在图像上时它才会起作用：

打印：

HTML：

<div class="row text-center">
        <div class="col-md-4 col-sm-4">
          <figure>
            <img src="img/hidrau.png" alt="Hidraurio Mangueiras">
          </figure>
        </div>
        <div class="col-md-4 col-sm-4">
          <figure>
            <img src="img/Gescolar.png" alt="Hidraurio Mangueiras">
            <figcaption>
            <a href="http://hidrauriomangueiras.com.br" target="_blank"><button class="btn-legenda">Visitar</button></a>
            <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button class="btn-legenda">Github</button></a>
            </figcaption>
          </figure>
        </div>
        <div class="col-md-4 col-sm-4">
          <figure>
            <img src="img/hidrau.png" alt="Hidraurio Mangueiras">
          </figure>
        </div>
     </div>

CSS：

#portfolio figure{
  position: relative;
  overflow: hidden;
}
#portfolio img{
  transition: all 0.4s ease;
}

#portfolio figure figcaption{
  overflow: hidden;
  position: absolute;
  bottom: -80px;
  height: 80px;
  width: 100%;
  transition: all 0.4s ease;
  color: white;
  background-color: #eeeeee;
}
#portfolio figure:hover figcaption {
  transform: translateY(-80px);
}
#portfolio figure:hover img {
  opacity: 1;
  transform: translateY(-50px);
}

Answer 1

当您将鼠标悬停在当前使用:hover显示的figure元素上时，会激活block伪，这意味着它占据其父级宽度的100％。以下是解决这个问题的两种方法：

显示：内联块;

这将调整宽度为其内容，在这种情况下为img元素。

#portfolio figure{
  position: relative;
  overflow: hidden;
  display: inline-block;
}

codepen

注意：这会将整个数字缩小到该宽度，因此figcaption背景不会跨越整个宽度，如果您需要...

跨越图中

要使图形保持100％宽度，而不是激活figure元素上的效果，只需将其内容包装在另一个元素（如跨度）中，然后将悬停样式应用于该元素。

HTML

<figure>
  <span>
    <img src="img/Gescolar.png" alt="Hidraurio Mangueiras">
    <figcaption>
      <a href="http://hidrauriomangueiras.com.br" target="_blank"><button class="btn-legenda">Visitar</button></a>
      <a href="https://github.com/tiagosilveiraa/hidraurio" target="_blank"><button class="btn-legenda">Github</button></a>
    </figcaption>
  </span>
</figure>

CSS

#portfolio figure>span:hover figcaption {
  transform: translateY(-80px);
}
#portfolio figure>span:hover img {
  opacity: 1;
  transform: translateY(-50px);
}

codepen

Figcaption溢出图像宽度

1 个答案: