CODEWITHSUNDEEP
htmlcss
Manuel van den Notelaer
Manuel van den Notelaer

Reputation: 55

Overflow hidden doesn't fill up entire height

My inner-divs have a background image which should be zooming in when you hover over it without the height and width of the div changing. I'm coming close but still the inner-div doesn't fill the full height of the outder-div. Unless you hover over it than the background image fills the entire height of the outer-div. This is because of the overflow:hidden I use I guess. Anyone knows how to fix this?

This is my HTML and CSS:

.outer-div {
  overflow: hidden;
}

.inner-div {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

#port1 {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
  background-image: url(../img/desk.jpg);
}

.inner-div:hover {
  transform: scale(1.2);
}
<div id="work" class="container border-bottom">
  <h1>My work</h1>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port1">
      <h3>test</h3>
      <p>Website x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port2">
      <h3>test</h3>
      <p>project y</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port3">
      <h3>test</h3>
      <p>Webapplicatie x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port4">
      <h3>test</h3>
      <p>Website y</p>
    </div>
  </div>
</div>

Upvotes: 1

Views: 965

Answers (2)

Armen Michaeli
Armen Michaeli

Reputation: 9140

You are witnessing a case of collapsing margins in CSS, an expected behavior.

Meaning that the top margin of your .inner-div > h3 becomes the top margin of your .inner-div and the bottom margin of your .inner-div > p becomes the bottom margin of your .inner-div again.

Obviously, you didn't expect that, but fortunately margin collapsing is subject to a set of conditions.

One of the ways to do make sure margins do not collapse is to specify an overflow other than visible on the child element (.inner-div in your case) that participates in the parent-child margin collapsing behavior:

.inner-div {
    overflow: auto; /* Or 'hidden', depending on your preferences. */
}

Upvotes: 2

Tushar
Tushar

Reputation: 4418

Are you looking for this?

.outer-div {
  overflow: hidden;
}

.inner-div {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

#port1 {
  height: 100%;
  width: 100%;
  background-size: 100%;
  background-position: center;
  transition: background-size 0.5s ease;
  background-image: url(https://dummyimage.com/600x400/ccc/fff&text=image);
}

#port1.inner-div:hover {
  /*transform: scale(1.2);*/
  background-size: 120%;
}
<div id="work" class="container border-bottom">
  <h1>My work</h1>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port1">
      <h3>test</h3>
      <p>Website x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port2">
      <h3>test</h3>
      <p>project y</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port3">
      <h3>test</h3>
      <p>Webapplicatie x</p>
    </div>
  </div>
  <div class="portfolio outer-div">
    <div class="inner-div" id="port4">
      <h3>test</h3>
      <p>Website y</p>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions