JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
    <div class="imgButton lg energy">
        <label>
            <input type="checkbox" value="Think positive">Little Energy
        </label>
    </div>
</a>

CSS

.imgButton input[type=checkbox] {display:none;}
.imgButton.energy {
    background: url(http://www.danalydesign.com/finding-time.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.imgButton {
	background-size: cover; 
	background-origin: content-box;
	background-position: top left;  
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	background-color: transparent !important;
	border:1px solid #e3e3e3;
	text-align: center;				
	color:#ff6600;	
	display:inline-block;		
	position: relative;
	overflow: hidden;
	margin-right: 15px;
}

.imgButton.sm {
	width: 106px; 
	height: 98px; 	
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px;	
	font-size:.8em !important; 
}

.imgButton.lg {
	width: 205px; 
	height: 188px; 
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;	
	font-size:1.0em !important;
}

.imgButton label {
	width: 100%; 
	height:auto; 
	position: absolute; 
	display:block; 
	top:80%;
}

.imgButton:hover {	
	background-image: url(http://www.danalydesign.com/finding-time.jpg), radial-gradient(ellipse at center,  #ffffff 30%,#f9c636 100%); /* W3C */	
	
	-moz-box-shadow: 0px 1px 18px -8px #000000;
	-webkit-box-shadow: 0px 1px 18px -8px #000000;
	box-shadow: 0px 1px 18px -8px #000000;
			
	border:1px solid #f8bf1f;
}