Javascript 在另一个html元素上具有悬停效果的响应图像覆盖

第一个问题：当我将鼠标悬停在图像上时，文本覆盖显示，但我希望当我将鼠标悬停在具有“point”类的跨度上时，覆盖显示，如何使其显示

第二个问题：文本覆盖没有响应，它不适合图像大小，我想当我调整图像大小时，文本覆盖会随着图像调整大小，我如何才能使它

对于javascript、bootstrap、css或其他不同的答案，我会非常满意

演示：

HTML:

<span class="point"></span>

<div class="caption">
    <img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
    <div class="caption__overlay">
        <div class="caption__overlay__content">
            <img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
            </a>
        </div>
    </div>
</div>

---

要解决第一个问题，您需要更改：

.caption:hover .caption__overlay {

致：

第二个问题已解决，添加：

.caption {
    display: inline-block;
}

.caption__media{
    max-width: 100%;
}

---

类似于？是的，谢谢！这解决了第一个问题，但我还需要一件事，即文本覆盖将适合图像大小并具有响应性。你说的“具有响应性”是什么意思？对不起，我将编辑我的答案，我忘了我在localhost上有覆盖，我只能看到它。检查，这是你想要的吗？

.point:hover + .caption .caption__overlay {

.caption {
    display: inline-block;
}

.caption__media{
    max-width: 100%;
}