CODEWITHSUNDEEP
phphtmlcsstwitter-bootstrapwidth
AugustoQ
AugustoQ

Reputation: 213

Width property not working on absolute-positioned div

I am working on a website for a friend of mine who is a painter. On his homepage I wanted to do a little horizontally-scrolling gallery with his 5 most recent works. Also, the idea is that when a person hovers over each of his images, they will see the name of the painting, and the actual size (for people who might have interest in contacting him for buying purposes, for instance).

Anyways, I managed to make the horizontally-scrolling little gallery, which is really simple, and I seemed do be on the right path to making the hover effect (I followed this tutorial), except that my divs (which kept the image and the overlay-info) wouldn't accept the width I assigned to it.

This is what my html looks like (it's actually php, but the php part is working nicely):

<div class="imagem">
  <ul>
    <?php for ($i = 0; $i < 5; $i++) { ?>
      <li>
        <div class="img">
          <img src="static/css/images/exemplo1.jpg" style="height: 40vh;" />
          <div class="overlay">
            <p>Name of the Painting</p>
            <p>45cm x 37cm</p>
          </div>
        </div>
      </li>
    <?php } ?>
  </ul>
</div>

And then my css for this portion looks like this:

.container .imagem {
  /*background-color: rgba(41, 41, 41, 0.1);*/
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;

  padding: 30px 0;
  padding-bottom: 20px;

  width: 90%;

  overflow-x: scroll;
  overflow-y: hidden;

  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);

  position: relative;
  left: 50%;
}

.container .imagem::-webkit-scrollbar {
  display: none;
}

.container .imagem ul {
  white-space: nowrap;
}

.container .imagem li {
  display: inline-block;
}

.container .imagem .img {
  display: inline-block;
}

.container .imagem .img .overlay {
  display: inline-block;
  z-index: 20;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: all 0.5s;
  color: rgba(255, 255, 255, 0.5);


  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
}

.container .imagem .img:hover .overlay {
  height: 100%;
}

I am also using Bootstrap, and this is actually my first project with it, so I'm not sure if I could be getting any problems from there.

Anyways, this has been driving me insane for a while now. I'm not extremely experienced with HTML5 or php, so I took this project as a way to learn more about it and get some more practical knowledge, still, I had never had a problem like this. The overlay div will either be 100% of the size of the little gallery I created, or it will be the exact width of the text in the p tags.

I tried a lot of things, like changing the display, putting the width as inherit, auto, 100%, not putting it in at all, coding it in the HTML (to see if I could overwrite anything I wasn't realising was there) and nothing worked, the two widths I described are always the only ones I get.

https://jsfiddle.net/uw0cz2yk/

Upvotes: 0

Views: 466

Answers (1)

FreedomMan
FreedomMan

Reputation: 443

I don't think position: absolute; will work on a child element without the parent having a position set. Try setting position: relative on the parent of .overlay, which in this case it your .img class.

Upvotes: 1

Related Questions