CODEWITHSUNDEEP
csscss-position
ScoobaSteve
ScoobaSteve

Reputation: 583

Make absolute positioned nested child the width of container

I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:

.hero-img-wrap {
  position: relative;
  margin-top: 35px;
  padding-left: 15px;
  padding-right: 15px;
}

.hero-img-wrap img {
  width: 100%;
  height: auto;
}

.hero-img-wrap .trans-overlay {
  position: absolute;
  bottom: 0;
  z-index: 9;
  height: 19px;
  background-image: url('../images/semi_transparent_white.png');
  width: 100%;
}
<div class="hero-img-wrap">
  <img src="images/banner_image.jpg" alt="">
  <div class="trans-overlay"></div>
</div>

I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.

Upvotes: 1

Views: 810

Answers (2)

seedy
seedy

Reputation: 91

Since you've defined the height, why not a negative value

position: relative;
top: -19px;

Just a thought, heres a fiddle for ya

http://jsfiddle.net/g11yggap/

Upvotes: 1

Ahmadbaba46
Ahmadbaba46

Reputation: 231

Try

Width:inherit;
On overlay div

Upvotes: 0

Related Questions