JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="resize('imagen_producto1')" ><div id="imagen_producto1"><img id="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQJRW3fkTuNiNDYwSllTrI4ACQPsV2K7JIaqJa3gyNyHszHCV4F" /></div></a>

CSS

img{
	position:absolute;
	top:0%;
	width:auto;
	max-width:100%;
	height:auto;
	max-height:100%;
		
}

#imagen_producto1{
	position:absolute;
	top:5%;
	left:5%;
	width:14.9%;
	height:22%;
	border: solid lightgrey 5px;
	transition:0.6s all;	
}

#imagen_producto1:hover:after{
	content: "Clic para aumentar";
    position: absolute;
    background: rgba(120,120,120,1);
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
    color: white;		
}

JavaScript

function resize(identificador){
		document.getElementById(identificador).style.width="50%";
		document.getElementById(identificador).style.height="80%";
		document.getElementById(identificador).style.zIndex="1";
		document.getElementById(identificador).style.top="5%";
		document.getElementById(identificador).style.left="25%";
		document.getElementById(identificador).style.backgroundColor="white";
		document.getElementById(identificador).style.borderRadius="0px 0px 0px 0px";
    
    		document.getElementById("image").style.width="150%";
		document.getElementById("image").style.height="150%";
}