Html 响应图像悬停字幕

我面临的问题是，悬停标题

。标题文本

和覆盖

。模糊

是固定的宽度和高度，而图像是响应的

关于如何修改此代码以使覆盖和标题适合图像宽度和高度，有何建议

.caption-style-4{
列表样式类型：无；
边际：0px；
填充：0px；
}
.caption-style-4 li{
浮动：左；
填充：0px；
位置：相对位置；
溢出：隐藏；
}
.caption-style-4 li:悬停。说明{
不透明度：1；
}
.caption-style-4 li：悬停图像{
不透明度：1；
变换：比例（1.15,1.15）；
-webkit转换：比例（1.15,1.15）；
-莫兹变换：比例（1.15,1.15）；
-ms变换：比例（1.15,1.15）；
-o变换：标度（1.15,1.15）；
}
.caption-style-4 img{
边际：0px；
填充：0px；
浮动：左；
z指数：4；
}
.caption-style-4.说明{
光标：指针；
位置：绝对位置；
不透明度：0；
-webkit过渡：所有0.45秒都易于输入输出；
-moz转换：所有0.45秒都易于输入输出；
-o型过渡：所有0.45秒均易于输入输出；
-ms转换：所有0.45秒均易于输入输出；
过渡：所有0.45秒均缓进缓出；
}
.caption-style-4 img{
-webkit过渡：所有0.25秒都易于输入输出；
-moz转换：所有0.25秒的易入易出；
-o型过渡：所有0.25秒缓进缓出；
-ms转换：所有0.25秒的缓进缓出；
过渡：所有0.25秒缓进缓出；
}
.caption-style-4.模糊{
背景色：rgba（0,0,0,0.65）；
高度：300px；
宽度：400px；
z指数：5；
位置：绝对位置；
}
.caption-style-4.标题文本h1{
文本转换：大写；
字体大小：24px；
}
.caption-style-4.标题文本{
z指数：10；
颜色：#fff；
位置：绝对位置；
宽度：400px；
高度：300px；
文本对齐：居中；
顶部：100px；
}

精彩字幕
不管它是什么-总是很棒


可以包括jquery.js并计算图像的宽度和高度。
同时添加到css
.singlePillar.caption{top:0px；}
例子：
只需更新您的css即可

.caption-style-4 .caption-text {
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 100%;
    height: 95px;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.caption-style-4 .blur {
    background-color: rgba(0,0,0,0.65);
    height: 100%;
    width: 100%;
    z-index: 5;
    position: absolute;
}
.caption-style-4 .caption {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

这是最新的代码笔

如果仍然不起作用，请告诉我。
请将编译后的HTML而不是PHP包含在内，以便我们重现您的问题。通过扫描很可能是由于您使用了绝对定位。源链接在这里：我认为这是因为绝对位置，因为没有w/h强制div打开。寻找一个建议/教程链接，如果可能的话，可以帮助我解决这个问题。我应该能够提供帮助，但要做到这一点，我需要一个可复制的例子。请修改你的问题，我看看我能做什么！就放一个密码笔进去-有帮助吗？