Black opacity overlay making image increase in size

Question

I have a small issue that is really bugging me. Whenever my images are hovered over, a black-overlay appears with an opacity. However, it makes the image grow in height. Please note, I am not referring to the transform, scale property. The actual image grows in height at the bottom of the image.

What is causing this?

$('.home-img-block').find('img').each(function() {
  var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
  console.log(imgClass);
  $(this).addClass(imgClass);
});

#home-img-block-section {
  width: 100%;
  height: 900px;
}
#home-img-blocks {
  width: 100%;
  height: 450px;
}
.home-img-block {
  width: 33.33%;
  /*height: 100%;*/
  float: left;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.home-img-block:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.home-img-block:after {
  content: attr(data-content);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  border: 1px solid #fff;
  padding: 20px 25px;
  text-align: center;
}
.home-img-block:hover:after {
  opacity: 1;
}
.home-img-block img {
  -webkit-transition: all 1s ease;
  /* Safari and Chrome */
  -moz-transition: all 1s ease;
  /* Firefox */
  -ms-transition: all 1s ease;
  /* IE 9 */
  -o-transition: all 1s ease;
  /* Opera */
  transition: all 1s ease;
}
.home-img-block:hover img {
  -webkit-transform: scale(1.25);
  /* Safari and Chrome */
  -moz-transform: scale(1.25);
  /* Firefox */
  -ms-transform: scale(1.25);
  /* IE 9 */
  -o-transform: scale(1.25);
  /* Opera */
  transform: scale(1.25);
  background: rgba(0, 0, 0, 0.3);
  width: 33.33%;
  max-height: 100%;
}
.home-img-block img.wide {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
}
.home-img-block img.tall {
  max-width: 100%;
  max-height: 100%;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test1.jpg">
    <div class="overlay"></div>
  </div>
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test2new.jpg">
    <div class="overlay"></div>
  </div>
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test3new.jpg">
    <div class="overlay"></div>
  </div>
</div>

Entirely irrelevant to your problem, but you can shorten that first snippet of jQuery (in which you add the class) to: `$('.home-img-block img').addClass(function () { return (this.width / this.height > 1) ? 'wide' : 'tall'; });` (But that's just a casual FYI and, as noted, irrelevant to your posted problem.) :) — David Thomas, Jan 22 '16 at 15:15

score 6 · Accepted Answer · answered Jan 22 '16 at 15:07

Images have a crazy display. They are neither of the block, inline-block, or inline. Try giving display: block to image because of their baseline property.

$('.home-img-block').find('img').each(function() {
  var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
  console.log(imgClass);
  $(this).addClass(imgClass);
});

img {
  display: block;
}
#home-img-block-section {
  width: 100%;
  height: 900px;
}
#home-img-blocks {
  width: 100%;
  height: 450px;
}
.home-img-block {
  width: 33.33%;
  /*height: 100%;*/
  float: left;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.home-img-block:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.home-img-block:after {
  content: attr(data-content);
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  border: 1px solid #fff;
  padding: 20px 25px;
  text-align: center;
}
.home-img-block:hover:after {
  opacity: 1;
}
.home-img-block img {
  -webkit-transition: all 1s ease;
  /* Safari and Chrome */
  -moz-transition: all 1s ease;
  /* Firefox */
  -ms-transition: all 1s ease;
  /* IE 9 */
  -o-transition: all 1s ease;
  /* Opera */
  transition: all 1s ease;
}
.home-img-block:hover img {
  -webkit-transform: scale(1.25);
  /* Safari and Chrome */
  -moz-transform: scale(1.25);
  /* Firefox */
  -ms-transform: scale(1.25);
  /* IE 9 */
  -o-transform: scale(1.25);
  /* Opera */
  transform: scale(1.25);
  background: rgba(0, 0, 0, 0.3);
  width: 33.33%;
  max-height: 100%;
}
.home-img-block img.wide {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
}
.home-img-block img.tall {
  max-width: 100%;
  max-height: 100%;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test1.jpg">
    <div class="overlay"></div>
  </div>
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test2new.jpg">
    <div class="overlay"></div>
  </div>
  <div data-content="FIND OUT MORE" class="home-img-block">
    <img src="http://optimumwebdesigns.com/images/test3new.jpg">
    <div class="overlay"></div>
  </div>
</div>

Nicely done; I hadn't realised the craziness of the `` element's `display` type (or issues). — David Thomas, Jan 22 '16 at 15:09
Awesome! Thanks. Only thing different I did was applied it to this div `.home-img-block img` rather than all of the images. Thanks again! — Becky, Jan 22 '16 at 15:10
I assumed that must have been the case; you have my sympathy for whatever time it took to discover the cause - though part of me wishes you'd asked that problem here (and self-answered it) to help out the community, and those of us that have never faced that problem :) — David Thomas, Jan 22 '16 at 15:11
@Becky I should say that. Make sure you give it to only **those** images and not like how stupid I have given for all images for demo purpose. `:P` — Praveen Kumar Purushothaman, Jan 22 '16 at 15:11
@DavidThomas Wow really? You would face it when you do the image linking in the "wrong" way. Who are now using images for linking? So now that's dead. And we all can jump in joy. CSS BG Image FTW! `:D` — Praveen Kumar Purushothaman, Jan 22 '16 at 15:12
Are images not `display:inline` by default, they only behave slightly differently as they are what is known as replaced elements — Pete, Jan 22 '16 at 15:14

Black opacity overlay making image increase in size

1 Answers1