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

Problem :

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.

The site

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>

Comments

Comment posted by user1318723123

try increasing z-index

By

Leave a Reply

Your email address will not be published. Required fields are marked *