css - 带有 css 和 html 的图像上的图像描述框

Question

我正在尝试在图片上创建一个图片描述框，我希望当您将鼠标悬停在图片上时图片会淡出。

这就是我想要实现的目标:

悬停时我想要这个:

这是我目前得到的结果:

HTML:

<div class="app-img-wrapper">
<a href="images/Example/pexels-photo-344544.jpeg" title="Image 1"> <img src="images/Example/pexels-photo-344544.jpeg" class="img-responsive" alt="App"> <h2><span>Image Text</span></h2> </a>
</div>

CSS:

.app-img-wrapper {
    position: sticky;
}

.app-img-wrapper h2 {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
}

.app-img-wrapper h2 span{
    color: white;
    font-size: 35px;
    font-weight: 400;
    text-align: center;
    /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
}

结果:

如您所见，我快完成了，但在将框与图像大小相匹配时遇到了问题。如果有人有任何提示，请在下面提出建议

Answer 1

不需要 h2 中的跨度。向所有内容添加了一些辅助类，并使用 a 标记的伪元素进行叠加。添加了一些过渡效果，让一切都变淡，但您可以根据需要进行调整。

.app-img-wrapper {
  position: sticky;
  display: inline-block;
}

.app-img-link:hover:before {
  opacity: 1;
}

.app-img-link:hover .app-img-text {
  background: rgba(34, 139, 34, 0.7);
  color: black;
}

.app-img {
  display: block;
}

.app-img-text {
  position: absolute;
  bottom: 0%;
  left: 0;
  right: 0;
  color: white;
  font-size: 35px;
  font-weight: 400;
  text-align: center;
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  margin: 0;
  transition: background .5s, color .5s;
}

.app-img-link:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: 'Click to view info';
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity .5s;
  opacity: 0;
}

<div class="app-img-wrapper">
  <a href="http://kenwheeler.github.io/slick/img/fonz1.png" class="app-img-link" title="Image 1"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="img-responsive app-img" alt="App">
    <h2 class="app-img-text">Image Text</h2>
  </a>
</div>