A image disappears under a div - html

Question

I'm trying to make a website. This is the gallery, and images should move to the center when you put the mouse over them, but id doesn't work, because the image magically disappears.
main {
width: 942px;
}
div {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Supermillion_Visuals_-_Aston_Fresh_Park_1-02601.jpg/1200px-Supermillion_Visuals_-_Aston_Fresh_Park_1-02601.jpg");
background-size: 217px 111px;
width: 217px;
height: 111px;
z-index: 1;
background-repeat: no-repeat;
position: absolute;
}
div:hover {
width: 100%;
height: 1000px;
transition: ease-in-out 1s;
z-index: 5;
}
.a {
top: 205px;
}
.a:hover {
background-position: 400px 170px;
background-size: 615px 333px;
}
.b {
top: 390px;
}
.b:hover {
background-position: 400px 0px;
background-size: 615px 333px;
}
.c {
top: 575px;
}
.c:hover {
background-position: 400px -170px;
background-size: 615px 333px;
}
.d {
top: 760px;
}
.d:hover {
background-position: 400px -340px;
background-size: 615px 333px;
z-index: 6;
}
<main>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</main>

Answer 1

It's because your changing the backhground-position making the image outside the bound of the div.
Do it diffenretly using scale and adjust the transform-origin:
div {
width: 217px;
position:relative;
margin:5px;
background-size:0 0;
}
/* keep the ratio of the image*/
div:before {
content:"";
display:block;
padding-top:50%; /* 1/2 */
}
/**/
/* the image */
div:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transition: ease-in-out 0.3s;
background-image:inherit;
background-size: 100% 100%;
}
/**/
div:hover::after {
transform:scale(2); /* make the image bigger*/
z-index:9;
transition: ease-in-out 1s;
}
/* same X different Y*/
.a::after {transform-origin:-120% -100%;}
.b::after {transform-origin:-120% -40%;}
.c::after {transform-origin:-120% 140%;}
.d::after {transform-origin:-120% 200%;}
<main>
<div class="a" style="background-image:url(https://picsum.photos/id/1000/400/200)"></div>
<div class="b" style="background-image:url(https://picsum.photos/id/100/400/200)"></div>
<div class="c" style="background-image:url(https://picsum.photos/id/1047/400/200)"></div>
<div class="d" style="background-image:url(https://picsum.photos/id/17/400/200)"></div>
</main>