Transparent box over an image - html

Question

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/

Answer 1

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>

Answer 2

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.

Answer 3

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>