JSFiddle - React, Tailwind, and code Playground

HTML

<form id="imgf">
    
    <h3>Images</h3>
    	
    <div class="parentBox">
	<img id="parentImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="Small pic" class="unmarkedImg notChecked">
		<div class="childBox">
			<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png"" alt="Bigger pic">
   <input type="checkbox"  onclick="javascript:funCalled(this)"/><span>Sample picture</span>	
		</div>
	</div>
            
        </form>

CSS

.parentBox {position:relative; float:left; display:inline-block; margin:6px;}
.parentBox>img {width:100px;}

.childBox {position:absolute; display:none; background-color:#EEE; color:#333; border:2px ridge #333; padding:6px; top:40px; left:20px; z-index:2;}

.parentBox:hover .childBox {display: block;}

.childBox img {display:block; width:250px; }
.childBox input {margin-right:1em;}

.notChecked {border: 1px solid black;}
.checked {border: 5px solid red;}

JavaScript

function funCalled(obj) {
      var el = document.getElementById("parentImg");
    if (obj.checked) {
    
     el.className = "checked"; 
    } else {
        el.className = "notChecked";
    }
}