Create semi-transparent Image Overlay - html

Question

I'm creating a one-page WordPress-theme. In each section there is a header with an image and an overlay.
The header has a background, within there is an image of a wrap-width. on bottom of that, there is a png-image which is semi-transparent and should be full-width, overlaying the header-image.
Since I'm using different styling for the sections, I'm numbering them and the overlay-image is in a different color for each section. So I should insert it through CSS.
Until now I just could make the overlay visible when I type in a height value. But since the page needs to be responsive, I want the height to be variable, and always 100% width.
My Code:
<?php query_posts('post_type=page&order=ASC'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="content" class=" section-<?php echo $i++; ?>">
<h2 class="headline"><?php the_field('headline') ?></h2>
<div class="header">
<div class="wrap cf">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('bones-thumb-600');
}
else {
}
?>
</div>
<div class="overlay"></div>
</div>
<div id="inner-content" class="wrap cf">
<div id="main" class="m-all">
<div class="stripes"></div>
<!-- Thumbnail -->
<a class="logo" href="#top"><img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" /></a>
<div class="sidebar">
<?php the_field('sidebar') ?>
</div>
<div class="main-content"><?php the_content(); ?></div>
<img src="<?php echo get_template_directory_uri(); ?>/library/images/separator.svg"/>
</div>
</div>

Answer 1

opacity: 0.5; should be what you search, 0.0 is transparent and 1.0 is visible, so 0.5 would be 50% visible

Answer 2

Please do like this
.image-holder{
height: 200px;
width:200px;
position: relative;
}
.image-holder:after{
content:'';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.3);
}
<div class="image-holder"><img src="images/img02.jpg" height="371" width="556" alt="image description"></div>