JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<a href="#"><img src="http://london.keepthinking.net/media/britishcouncil/collection/w517/p6958.jpg" height="400" /><span></span></a>

CSS

a {
    position: relative;
    float: left;
    border: solid 1px red;
}

img {
    vertical-align: bottom;
}

span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;

}

a:hover span {
    background: -moz-radial-gradient(50% 50% 45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
}