带有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

无需.filter中的跨度。为所有内容添加了一些辅助类，并使用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;
}