Alpine js, mouseover to show text, no jumping content - mouseover

Question

I made an example on CodePen - CodePen
I want the image to disappear on hover with the mouse and a block with text appears.
My problem is that I don't understand how to remove the jumps if I want to keep the text.
Now there are unpleasant jumps in my layout, which is caused by display: none;.
And I think to add smooth transitions. For reuse, I moved the code to Alpine.data. Is this a good idea?
I've used alpine before with tilewind and it's easier. But in this bootstrap project, there are complications.
Please tell me what are your ideas?
Thanks in advance!
<div class="container advantage-pic">
<div class="pic1" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic1.png" alt="">
<div class="txt" x-cloak x-show="open" >Some text</div>
</div>
<div class="pic2" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic2.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic3" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic3.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
<div class="pic4" x-data="onHover" #mouseover="visible" #mouseleave="novisible">
<img class="pic" x-show="!open" src="https://napli.ru/advantage-pic4.png" alt="">
<div class="txt" x-cloak x-show="open">Some text</div>
</div>
</div>
[x-cloak] {
display: none !important;
}
.advantage-pic {
max-width: 760px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 12px;
grid-row-gap: 12px;
}
.pic1 {
grid-area: 1 / 1 / 3 / 2;
text-align: center;
position: relative;
}
.pic2 {
grid-area: 1 / 2 / 2 / 3;
text-align: center;
position: relative;
}
.pic3 {
grid-area: 2 / 2 / 3 / 3;
text-align: center;
position: relative;
}
.pic4 {
grid-area: 3 / 1 / 4 / 3;
text-align: center;
position: relative;
}
.txt {
color: blue;
background: #fe980f;
position: absolute;
top: 0;
left: 0;
transition: height 500ms ease 0s;
width: 100%;
display: block;
height: 100%;
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
import Alpine from "https://cdn.skypack.dev/alpinejs#3.10.5";
Alpine.data("onHover", () => ({
open: false,
visible() {
this.open = true;
},
novisible() {
this.open = false;
},
}));
queueMicrotask(() => {
Alpine.start();
});

Answer 1

Solved! There was no need to hide the picture, there was no jump!
x-show="!open"