Rolling over image moves everything below it down

Question

I have a rollover image with the following code:

<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>

And 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>

The rollover work fine, but the caption (h5) moves down like image2.png is still in its original position. Using margin-top instead of top doesn't work because this needs to work on many different screen sizes. Is there a way to do this hover without the caption moving down, and without using "@media(max-width: .....)"?

Thanks!