描述框html,图像描述框与图像与CSS＆html

我试图在图像上创建一个图像描述框，我希望当您将鼠标悬停在图像上图像褪色。图像描述框与图像与CSS＆html

这是我想acheive什么：

悬停我想这样：

这是我走到这一步：

HTML：

Image Text

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;

}

结果：

正如你所看到的，我几乎没有，但有与盒匹配图像尺寸的麻烦。如果有人有任何提示，请在下面建议