JSFiddle - React, Tailwind, and code Playground

HTML

<li>
    <input id="1" type="checkbox">
    <label for="1">
        <figure>
            <img src="http://www.moderndandies.com/files/images/Asus-smartphone-android.jpg">          
        </figure>
    </label>
</li>

CSS

li {
 padding: 0;
margin: 0;    
    list-style:none;
}

input {
position: absolute;
left: -9999px;        
}


figure {
    padding: 0;
    margin: 0;        
    position: relative;
    background: black;
}

figure::after {
    content: "+";
    display: block;
    font-size: 60px;
    height: 1em;
    width: 1em;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -.5em 0 0 -.5em;
    z-index: 100;
}

img {
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;        
    height: 100%;
    z-index: 900;
    transition: opacity .35s ease-in-out;   
display: block;    
}

input:checked + label > figure > img {
    opacity: .5;   
}