咨询：悬停切换图片时避免下方标题下移的CSS实现方案

我使用以下代码实现了悬停切换图片效果：

<div class="row">
<div class="col-lg-6 offset-lg-3">

<div class="image-rollover1">
<img src="image1.png" width="100%"/>
</div>

<div class="image-rollover2">
<img src="image2.png" width="100%"/>
</div>
</div>
</div>

<h5>THIS IS A CAPTION</h5>

对应的CSS代码如下：

<style>
.image-rollover2 {
position: inherit;
top: -50%;
display:none;
transition: all .2s ease-out;
}

.image-rollover1:hover + .image-rollover2 {
display: block;
transition: all .2s ease-out;
}

.image-rollover2 {
pointer-events: none;
}
</style>

目前悬停切换功能正常，但下方的标题（h5）会下移，仿佛image2.png仍处于原位置。使用margin-top替代top无法适配多屏幕尺寸，请问能否在不使用@media媒体查询的前提下，实现悬停切换时标题不下移？

核心原因 #

问题根源在于.image-rollover2的定位逻辑：position: inherit默认继承父元素的static定位，此时top属性完全无效，元素会占据文档流空间。当它从display:none切换为display:block时，会挤压下方的h5元素导致下移。

解决方案：让两张图片重叠，不占用额外文档流 #

以下两种方案都无需媒体查询，可适配所有屏幕尺寸：

方案1：相对定位父容器 + 绝对定位图片容器 #

HTML结构保持不变，仅修改CSS：

<style>
/* 给父容器设置相对定位，作为绝对定位的参考基准 */
.col-lg-6.offset-lg-3 {
  position: relative;
}

.image-rollover1, .image-rollover2 {
  width: 100%;
}

.image-rollover2 {
  position: absolute; /* 脱离文档流，不占用额外空间 */
  top: 0;
  left: 0;
  opacity: 0; /* 用透明度替代display:none，支持过渡动画 */
  transition: opacity .2s ease-out;
  pointer-events: none;
}

/* 悬停时显示第二张图 */
.image-rollover1:hover + .image-rollover2 {
  opacity: 1;
}
</style>

为什么用opacity而非display？
display属性无法触发过渡动画，使用opacity既能实现平滑的淡入淡出效果，又完全不会影响文档流布局。

方案2：CSS Grid 实现重叠 #

无需定位，利用Grid布局让两个元素占据同一网格单元格：

<style>
.col-lg-6.offset-lg-3 {
  display: grid;
}

.image-rollover1, .image-rollover2 {
  grid-area: 1 / 1; /* 指定两个元素共享同一网格位置 */
  width: 100%;
}

.image-rollover2 {
  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;
}

.image-rollover1:hover + .image-rollover2 {
  opacity: 1;
}
</style>

这个方案代码更简洁，适合现代浏览器环境。

注意事项 #

• 确保两张图片的尺寸一致，避免重叠时出现错位
• pointer-events: none保证第二张图不会干扰鼠标悬停事件，触发逻辑始终由第一张图控制

内容的提问来源于stack exchange，提问作者Eric Sayag