JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="picture-promo">
  <a href="#">
   <img src="http://via.placeholder.com/150x150">
  </a>	
</div>

CSS

.picture-promo{
    border: 1px solid #f00;
    display: inline-block;
    vertical-align: top;
}
.picture-promo > a,
.picture-promo img{
    display: block;
}
.picture-promo > a{
    position: relative;
}
.picture-promo > a:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    opacity: 0;
    transition: opacity .3s linear;
}
.picture-promo:hover > a:before{
    opacity: 1;
}