JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" >  
	<div class="imgWrap">
	    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1"  >
	</div>
</div>

CSS

.box{
	width:191px; 
	background:#FCFBDF;  
	margin: 0 auto;  
} 
		
	
img{
	 width:191px;
     height:191px;
	 display:block;
	 border-radius:50%;
		    
}
.imgWrap{
	position:relative;
		    
}
.imgWrap:after{
	content:"";
    position:absolute;
	top:0; bottom:0; left:0; right:0;
	opacity:0.5;
	border: 10px solid rgba(248, 248, 255, 0.7);
	border-radius:50%;
}

.imgHover{
    width:300px;
    height:300px;
}

JavaScript

$(".imgWrap").hover(function(){    
    $('img').toggleClass("imgHover");
    $('.imgWrap').toggleClass("imgHover");
    $('.box').toggleClass("imgHover");
});