Jquery 如何使悬停标题覆盖整个图像大小？

我正在尝试制作一个悬停标题，即使它调整了大小，也能适应整个图像的宽度和高度。我已经尝试使用我在这里找到的jquery代码，但我还没有弄清楚如何使它工作

$（文档）.ready（函数（）{
var imgWidth=$（'.imagen'）.width（）；
$（'.caption text'）.css（{width:imgWidth}）；
$（'.caption-style-1'）.css（{width:imgWidth}）；
$（'.blur'）.css（{width:imgWidth}）；
});
.container-a1{
身高：100%；
宽度：100%；
}
.标题-style-1{
列表样式类型：无；
边际：0px；
填充：0px；
}
.caption-style-1 li{
浮动：左；
填充：0px；
位置：相对位置；
溢出：隐藏；
}
.caption-style-1 li:悬停。说明{
不透明度：1；
}
.caption-style-1 img{
边际：0px；
填充：0px；
浮动：左；
z指数：4；
}
.caption-style-1.说明{
光标：指针；
位置：绝对位置；
不透明度：0；
-webkit过渡：所有0.45秒都易于输入输出；
-moz转换：所有0.45秒都易于输入输出；
-o型过渡：所有0.45秒均易于输入输出；
-ms转换：所有0.45秒均易于输入输出；
过渡：所有0.45秒均缓进缓出；
}
.caption-style-1.模糊{
背景色：rgba（0,0,0,0.65）；
位置：绝对位置；
高度：500px；
宽度：400px；
z指数：5；
位置：相对位置；
}
.caption-style-1.标题文本h1{
文本转换：大写；
字体大小：24px；
}
.caption-style-1.标题文本{
z指数：10；
颜色：#fff；
位置：绝对位置；
宽度：400px；
高度：500px；
文本对齐：居中；
顶部：100px；
}
.imagen{
高度：800px；
宽度：800px；
}



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



然后，您只需将
图像的
高度
属性添加到
.blur
类中即可


$（文档）.ready（函数（）{
var imgWidth=$（'.imagen'）.width（）；
var imgHeight=$（'.imagen'）.height（）；
$（'.caption text'）.css（{width:imgWidth}）；
$（'.caption-style-1'）.css（{width:imgWidth}）；
$（'.blur'）.css（{宽度：imgWidth，高度：imgHeight}）；
});
.container-a1{
身高：100%；
宽度：100%；
}
.标题-style-1{
列表样式类型：无；
边际：0px；
填充：0px；
}
.caption-style-1 li{
浮动：左；
填充：0px；
位置：相对位置；
溢出：隐藏；
}
.caption-style-1 li:悬停。说明{
不透明度：1；
}
.caption-style-1 img{
边际：0px；
填充：0px；
浮动：左；
z指数：4；
}
.caption-style-1.说明{
光标：指针；
位置：绝对位置；
不透明度：0；
-webkit过渡：所有0.45秒都易于输入输出；
-moz转换：所有0.45秒都易于输入输出；
-o型过渡：所有0.45秒均易于输入输出；
-ms转换：所有0.45秒均易于输入输出；
过渡：所有0.45秒均缓进缓出；
}
.caption-style-1.模糊{
背景色：rgba（0,0,0,0.65）；
位置：绝对位置；
高度：500px；
宽度：400px；
z指数：5；
位置：相对位置；
}
.caption-style-1.标题文本h1{
文本转换：大写；
字体大小：24px；
}
.caption-style-1.标题文本{
z指数：10；
颜色：#fff；
位置：绝对位置；
宽度：400px；
高度：500px；
文本对齐：居中；
顶部：100px；
}
.imagen{
高度：800px；
宽度：800px；
}



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



但它已经适应了图像的整个高度和宽度。我做了一个片段给你们看：）看看我的答案。我想这就是你想要的：）