0

I am making an image gallery using just html, css(flexbox). The problem is this that the images inside the div are shaking while mouser hover when i am using object-fit: cover property on the images.

<!-- language: lang-css-->
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    img {
      width: 250px;
      height: 200px;
      **object-fit: cover;**
    }

    .header {
      font-family: 'Kaushan Script', cursive;
    }

    .wrapper {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .img-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 70vw;
      align-items: center;
    }

    .img-sqr {
      box-shadow: 0px 0px 10px #ccc;
      margin: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      transition: all 0.2s;
      padding: 20px;
    }

    .img-sqr:hover {
      box-shadow: 3px 3px 5px 3px #ccc;
      transform: scale(1.03);
    }

    .img-sqr span {
      font-family: 'Sigmar One', cursive;
    }

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Collections</h1>
    </div>
    <div class="img-gallery">


      <div class="img-sqr" id="sqr5">
        <div class="img-div"><img src="images/converse-upsidedown.jpg" alt="" class="img"></div>
        <span class="name">Upsidedown</span>
      </div>
      <div class="img-sqr" id="sqr6">
        <div class="img-div"><img src="images/food-unsplash.jpg" alt="" class="img"></div>
        <span class="name">Food</span>
      </div>
      <div class="img-sqr" id="sqr7">
        <div class="img-div"><img src="images/friendshipunsplash.jpg" alt="" class="img"></div>
        <span class="name">Friendship</span>
      </div>
      <div class="img-sqr" id="sqr8">
        <div class="img-div"><img src="images/hot-air-baloons-outdoor.jpg" alt="" class="img"></div>
        <span class="name">Outdoor</span>
      </div>
      <div class="img-sqr" id="sqr12">
        <div class="img-div"><img src="images/reflectionunsplash.jpg" alt="" class="img"></div>
        <span class="name">Reflection</span>
      </div>
    </div>
  </div>
</body>

2 Answers2

1

Tried running your code with different and didn't see images flickering/shaking. Flickering/Shaking could be due to different Aspect Ratio of your images before and after hover. Adding object-fit: cover to hover CSS as below might solve your issue.

.img-sqr:hover {
      box-shadow: 3px 3px 5px 3px #ccc;
      transform: scale(1.03);
      object-fit: cover;
    }

You can read more about object-fit CSS property here.

Amulya K Murthy
  • 130
  • 1
  • 2
  • 15
-1

Remove transform property from img-sqr:hover

Muhammad Naveed
  • 92
  • 4