在悬停图像上显示文本

Question

当鼠标悬停在网页上时，我想在网页上的所有图像上添加标题（粗体）和子标题（非粗体）。我已经具有悬停时图像淡入/更改颜色的效果。以下是图像：https://imgur.com/a/xLXSUkx

这是它的HTML代码：

<div class="JA-linkWrap JA-Notprojects JA-NotObjects floatleft" style="width:300px;">
            <a href="https://canadacouncil.ca/initiatives/venice-biennale" class="JA-projectPageLink">
                <img src="images/GRID/111%20jpeg%20grid.jpg" alt="" class="JA-newsmediaImage">
            </a>  

        </div>     

这是图像在悬停时会消失的CSS：

.JA-linkWrap img:hover {
    -webkit-filter: brightness(90%);
}

这是.JA-linkWrap的CSS：

.JA-linkWrap {
    float: left;
    margin: 12px;
}

请具体说明，我是新来的。