CODEWITHSUNDEEP
htmlcss
Tomislav Nikolic
Tomislav Nikolic

Reputation: 193

Transparent box over an image

Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page

HTML

<div id="main_BodyNews">
                <img src="img/main.png" alt="mainNews" />
                <div class="overflow-box"></div>
    </div>

And the CSS

#main_BodyNews {
    width: 50%;
    height: 300px;
    background-color: #F2C68C;
    margin-top: 50px;
    margin-left: 20px;
    float: left;
    border-radius: 5px;
    border: 1px solid #F2C68C;
}

#main_BodyNews img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: 1px solid #F2C68C;
    position: relative;
}

.overflow-box {
    position:absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:rgba(255,255,0,0.5);
    width: 100%;
    height: 100%;
}

JS fiddle: https://jsfiddle.net/0utbjwo0/

Upvotes: 1

Views: 900

Answers (3)

hdotluna
hdotluna

Reputation: 5732

It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.

#main_BodyNews {
  width: 50%;
  height: 300px;
  background-color: #F2C68C;
  margin-top: 50px;
  margin-left: 20px;
  float: left;
  border-radius: 5px;
  border: 1px solid #F2C68C;
  position: relative;
}

#main_BodyNews img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: 1px solid #F2C68C;
  position: relative;
}

.overflow-box {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
  <img src="img/main.png" alt="mainNews" />
  <div class="overflow-box"></div>
</div>

Upvotes: 1

Prox
Prox

Reputation: 759

You can use absolute. It's just that you are setting width: 100%; height: 100%;

Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div. Here is an example of one I have made for my site.

#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}

You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.

Upvotes: 1

Rahul
Rahul

Reputation: 4364

you should add position: relative; to your absolute parent div 

#main_BodyNews{
  position: relative;
}


#main_BodyNews {
	width: 50%;
	height: 300px;
	background-color: #F2C68C;
	margin-top: 50px;
	margin-left: 20px;
	float: left;
	border-radius: 5px;
	border: 1px solid #F2C68C;
  
    position: relative;
}

#main_BodyNews img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: 1px solid #F2C68C;
	position: relative;
}

.overflow-box {
	position:absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
				<img src="img/main.png" alt="mainNews" />
				<div class="overflow-box"></div>
			</div>

Upvotes: 2

Related Questions