Html 悬停时图像上显示的文本是否比图像大？

我能够在将鼠标悬停在图像上时显示描述，同时使图像保持居中并对缩放做出响应，这要归功于。然而，当我试图缩小太多时，描述开始脱离图像的边界，它应该覆盖

下面是负责上述操作的代码。欢迎提出任何建议

HTML 为

使用
框大小：边框框
和
边距：0
。img\u说明

.img\uu包装{
位置：相对位置；
高度：自动；
}
img{
显示：块；
保证金：0自动；
最大宽度：100%；
高度：自动；
}
.img__说明{
位置：绝对位置；
宽度：100%；
身高：100%；
底部：0；
左：0；
右：0；
文本对齐：居中；
框大小：边框框；
背景#544f50；
颜色：#fff；
可见性：隐藏；
不透明度：0；
填充：10%；
转换：不透明度.2s，可见性.2s；
保证金：0；
}
.img\u wrap:hover.img\u说明{
能见度：可见；
不透明度：0.75；
}

您所在的网站

能否请您发布一段运行的代码片段，以便我们可以看到您问题的再现？？谢谢这是一个JSFIDLE。如果您已经看到图像的问题，文本环绕将显示在图像的外部，直到您放大它，它不会收缩到比图像更小的位置。

<div class= "img__wrap">
    <img src="Capture.JPG" alt= "Website"/>
    <p class= "img__description">The website you're on!</p>
</div>

 img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.img__wrap {
    position: relative;
    max-width: 100%;
    height: auto;
}

.img__description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #544f50;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    padding: 10%;
    transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
    visibility: visible;
    opacity: 0.75;
}