CODEWITHSUNDEEP
cssreactjscss-transitionsjsx
Leticia Fatima
Leticia Fatima

Reputation: 522

enlarge the image and overlay the others when hovering

I have a line of images and when I hover over an image, I want it to enlarge and overlap the other images. The way I did it, when I move the mouse over it, the row is all disfigured:

enter image description here

enter image description here

code:

<div>
    <p>Fotos do anúncio</p>
    {row.images.map((image, key) => (
        <img className="imagesTable" src={image.url} />
    ))}
</div>

style:

.imagesTable {
  width: 50px !important;
  height: 50px !important;
  margin-right: 10px !important;
  margin-top: 5px !important;

   &:hover {
      width: 200px !important;
      height: 200px !important;
      object-fit: cover;
   }
}

Upvotes: 0

Views: 448

Answers (2)

Leticia Fatima
Leticia Fatima

Reputation: 522

I did it like this and it worked:

enter image description here

enter image description here

code:

<div>
    <p>Fotos do anúncio</p>
    <div className="images">
        {row.images.map((image, key) => (
            <div className="image-container">
                <img src={image.url} alt="Imagem anúncio" />
            </div>
        ))}
    </div>
</div>

style:

.images {
    display: flex;
    overflow: hidden;
    transition: all 1.2s ease;
    margin-top: -15px;
  }
  
  .image-container {
    position: relative;
    display: flex;
  
    img {
      width: 50px;
      height: 50px;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
  }
  
  .image-container:not(:nth-child(1)) {
    position: relative;
    margin-left: -15px;
  }
  
  .image-container:hover {
    z-index: 1000;
  
    img {
      width: 170px;
      height: 200px;
      cursor: pointer;
    }
  }

Upvotes: 0

hrood
hrood

Reputation: 481

As someone else has commented, the way to do this would be to use transform:scale(2) on &:hover - adjusting the number as necessary. This should avoid any layout shift, and it will be more performant than animating the width as you are currently doing.

See this article: https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/

Upvotes: 1

Related Questions