Изображение исчезает под div

Question

Я пытаюсь сделать сайт. Это галерея, и изображения должны перемещаться в центр, когда вы наводите на них мышь, но идентификатор не работает, потому что изображение волшебным образом исчезает.

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

Это потому, что вы изменили backhground-position, сделав изображение за пределами границы.

Сделайте это по-разному, используя масштаб и отрегулируйте источник преобразования:

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://i.picsum.photos/id/1000/400/200.jpg)"></div>
  <div class="b" style="background-image:url(https://i.picsum.photos/id/100/400/200.jpg)"></div>
  <div class="c" style="background-image:url(https://i.picsum.photos/id/1047/400/200.jpg)"></div>
  <div class="d" style="background-image:url(https://i.picsum.photos/id/17/400/200.jpg)"></div>
</main>