Portfolio hover overlay not staying in image size

Question

For my portfolio site I am making I have it so when you hover over the portfolio image it overlays the title and category. My problem is the overlay section is picking up the margin and padding for the spacing of the images in the grid. I cant get it to be whatever the portfolio image size is without removing the gutter between the images.

Example below:

Not sure how to fix this and any help would be appreciated.

.thumbnail {
  padding: 0px !important;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 0px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  padding: 0px 0px 0px 0px;
  transition: .5s ease;
  background-color: rgba(136, 24, 38, 0.6);
}

.thumbnail:hover .overlay {
  opacity: 1;
  height: 100%;
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<section id="work" class="bg-grey">
  <div class="container-fluid text-center">
    <h2>MY WORK</h2>
    <!--<h4>What we have created</h4>-->
    <div class="row text-center">

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="images/portfolio-img1.jpg" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</section>

Answer 1

When you use a absolute positioned element, always set the respective relative, position element. Let me know if you have any issues with the output.

The only CSS change is to the below class. Where I have added the property position: relative.

.thumbnail {
  padding: 0px !important;
  position: relative;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

So your absolute positioned div with class overlay will be positioned with respect to the div with class thumbnail

.thumbnail {
  padding: 0px !important;
  position: relative;
  margin-bottom: 25px;
  border: none;
  border-radius: 0;
  display: block;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 0px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  padding: 0px 0px 0px 0px;
  transition: .5s ease;
  background-color: rgba(136, 24, 38, 0.6);
}

.thumbnail:hover .overlay {
  opacity: 1;
  height: 100%;
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  width: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="work" class="bg-grey">
  <div class="container-fluid text-center">
    <h2>MY WORK</h2>
    <!--<h4>What we have created</h4>-->
    <div class="row text-center">

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="http://www.google.com/">
          <div class="thumbnail">
            <img src="http://lorempixel.com/100/100/" alt="PORTFOLIO NAME">
            <div class="overlay">
              <div class="text">
                <h4>PORTFOLIO NAME</h4>
                <p>category</p>
              </div>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</section>