JSFiddle - React, Tailwind, and code Playground

by Mahdi Raddadi

HTML

<input class='checkimage' type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"><img src='https://s-media-cache-ak0.pinimg.com/originals/5a/39/e4/5a39e471b06ab93b6c802768238b80c0.jpg' for='thing2'/>good morning Spartans</label>

CSS

.checkimage{
display:none;
}

.checkimage + label{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;  
}

.checkimage + label img{
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
    opacity: 0.4;
    filter: alpha(opacity=40);
    height: 100px;
    width: 100px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    border-radius: 0.75em;
}
.checkimage + label:hover img{
    -webkit-filter: grayscale(65%);
    filter: grayscale(65%);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.checkimage:checked + label img{ 
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1.0;
    filter: alpha(opacity=100);

}