JSFiddle - React, Tailwind, and code Playground

HTML

<div>
   <center>
   <table style="width:50%;">
 <tr>
   <td><a href="flash72.html" ><img id="hovergallery" height="240px" width="162px"  src="images/Flashhomepage.png" /></a></td>
   <td><a href="toolreconditioning.html" ><img id="hovergallery" height="240px" width="162px"  src="images/toolreconditioninggraphic.png" /></a></td>
 
   <td><a href="quotes.html" ><img id="hovergallery" height="240px" width="162px"  src="images/quotegraphic.png" /></a></td>
   <td><a href="pdfs/2015-ctmi-drill-catalog.pdf" target="_blank"><img id="hovergallery" height="240px" width="162px"  src="images/cataloghomepagegraphic.png" /></a></td>
 </tr>
</table>
   </center>
   </div>

CSS

#hoverimage {


	text-align:center;	
	margin-left:13%;
	margin-right:13%;
	z-index: 9999;	
}

#hoverimage1 {
	width: 162px;
	float: left;
	margin-right: 10px;
	z-index:9999;
}

#hoverimage2 {
	width: 162px;
	float: left;
	margin-right: 10px;
	z-index: 9999;
}

#hoverimage3 {
	width: 162px;
	float: left;
	margin-right: 10px;
	z-index: 9999;
}

#hoverimage4 {
	width: 162px;
	float: left;
	margin-right: 10px;
	z-index: 9999;
}

#hovergallery{

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
transition-duration: 0.5s;
opacity: 0.8; /*initial opacity of images*/
margin: 0 20px 10px 0; /*margin between images*/
}

#hovergallery:hover{
-webkit-transform:scale(1.4); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.4); /*Opera scale version*/
-ms-transform:scale(1.4);
transform: scale(1.4);
opacity: 1;


}