How to add overlay on the image

<style>

.archive-hero-overlay {
padding:10px;
position:absolute;
opacity:0.5;
height:100%;
width:100%;
border-radius: 8px;
}

</style>

<div class=”w-100 position-relative”>
<div class=”archive-hero-overlay” style=”background: #ee1e7c”></div>
<img src=”http://img_url.com” class=”w-100″>
</div>