Why is there a difference between width when i hover over this?-CodePudding

#gallery {
  padding: 2rem 7%;
}

#gallery .row {
  display: flex;
  align-items: center;
  justify-content: center;
}

#gallery .row .col-md-3 {
  position: relative;
  overflow: hidden;
}

#gallery .row .col-md-3 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#gallery .row .content {
  position: absolute;
  background: greenyellow;
  padding: 3rem 2rem;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateY(100%);
}

#gallery .row .col-md-3:hover img {
  transform: translateY(-100%);
}

#gallery .row .col-md-3:hover .content {
  transform: translateY(0);
}

.gallery-btn {
  border: 1px solid rgb(94, 21, 21);
  background-color: transparent;
  color: rgb(163, 27, 27);
  font-size: 18px;
  padding: 9px 26px;
}

<section  id="gallery">
  <div >
    <h3>Our Gallery</h3>
  </div>
  <div >
    <div >
      <img src="images/g-img-1.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
    <div >
      <img src="images/g-img-3.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
    <div >
      <img src="images/g-img-3.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
  </div>
  <div >
    <div >
      <img src="images/g-img-4.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
    <div >
      <img src="images/g-img-5.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
    <div >
      <img src="images/g-img-6.jpg" alt="" />
      <div >
        <h5>Morning Coffee</h5>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
        </p>
        <button type="button" >
                            Read More
                        </button>
      </div>
    </div>
  </div>
</section>

So when I hover over the image I see that there seems to be difference between height and width.

What is the problem I can't figure it out, i tried inspecting and i see width difference.

I am using bootstrap 5 too if that helps.

Any help is appreciated, thanks

CodePudding user response：

It is taking padding from somewhere, not a good practice but you can do so:

#gallery .row .col-md-3 {
    position: relative;
    margin: 5px 10px;
    padding:0;
    overflow: hidden;
}