JSFiddle - React, Tailwind, and code Playground

by reggi

HTML

<div class="darken-container">
    <div class="darken-on-hover"></div>
    <img src="http://cdn.shopify.com/s/files/1/0031/5352/products/You_are_totally_awesome_lo_1024x1024.jpg?v=1391196547" width="300">
</div>

CSS

.darken-container {
    position:relative;
    float:left;
}
.darken-on-hover {
    position:absolute;
    top:0;
    left:0;
    background-color:#000;
    width:100%;
    height:100%;
    opacity:0;
    transition: opacity .10s linear;
    -moz-transition: opacity .10s linear;
    -webkit-transition: opacity .10s linear;
}

.darken-container:hover .darken-on-hover {
    opacity:0.08;
    transition: opacity .10s linear;
    -moz-transition: opacity .10s linear;
    -webkit-transition: opacity .10s linear;
}