CSS/HTML覆盖缺少对齐

我做了一个覆盖在一个图像内部，覆盖是成功的。当我将鼠标悬停在图像上时，它会变成蓝色，并显示所需的文本

但是，覆盖层与图像不对齐，我不确定该怎么办。我不知道我是应该调整覆盖代码，比如它的位置，还是图像代码。看起来是这样的：

这是我的代码：

h1{颜色：绿色；字母间距：5px；
字体系列：“新罗马时代”；
文本对齐：居中；填充底部：5px；}
.img{宽度：80%；
高度：80%；边缘底部：100px；
显示：块；位置：相对
}
.集装箱{
位置：相对位置；
宽度：50%；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：80%；
宽度：80%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

哈利波特系列
你好，世界
你好，世界

在你的叠加课程中将你的

身高：80%

更改为

身高：100%

。例如

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

---

将img设置为宽度：80%和高度：80%并不能保证它将保持两个相对坐标，因为它们不是绝对坐标。如果将宽度保持为100%，然后将覆盖宽度和高度设置为100%，这将确保覆盖覆盖整个图像

h1{
颜色：绿色；
字母间距：5px；
字体系列：“新罗马时代”；
文本对齐：居中；
垫底：5px；
}
.img{
宽度：100%；
边缘底部：100px；
显示：块；
职位：相对
}
.集装箱{
位置：相对位置；
宽度：50%；
背景：红色；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

你好，世界
你好，世界

make

.overlay{height:100%；}

它对你有用

h1{颜色：绿色；字母间距：5px；
字体系列：“新罗马时代”；
文本对齐：居中；填充底部：5px；}
.img{宽度：80%；
高度：80%；边缘底部：100px；
显示：块；位置：相对
}
.集装箱{
位置：相对位置；
宽度：50%；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：80%；
不透明度：0；
过渡：放松；
背景色：#008CBA；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：白色；
字体大小：20px；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

哈利波特系列
你好，世界
你好，世界

请分享实际代码，而不仅仅是屏幕截图。谢谢请发布工作代码，而不仅仅是屏幕截图。没有人会为你重新键入。同样，itcheange

.overlay

高度的html也会更改为100%。成功了！谢谢我建议将您的代码笔链接作为stackoverflow中的一个片段，理由是如果出于某种原因该代码笔发生了什么事情，示例将保留在stackoverflow上，最好将对您的答案有帮助的内容在内部链接到stackoverflow，因此，随着时间的推移，答案的有用性不会因为死链接或其他原因而降低