JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	  	<div id="Footer_Container">
	  		<div class="insideDiv1">
	  		 	<img class="img_Fade" src="http://i.imgur.com/Z12Eyp0.jpg">
	  		</div>

             <div class="insideDiv2">
	  		 	<img class="img_Fade" src="http://i.imgur.com/jiNNIqe.jpg">
	  		 </div>

             <div class="insideDiv3">
	  		 	<img class="img_Fade" src="http://i.imgur.com/LDDvehX.jpg">
	  		 </div>
	  	</div>


         </div>

CSS

#Footer_Container {
	width: 100%;
	height: 20%;
}




.insideDiv1{
	float: left;
	background-color: blue;
	width: 33%;
	height: 100%;
	border: 0px;
	margin: 0px;
	padding: 0px;
}


.insideDiv2{
	float: left;
	background-color: orange;
	width: 33%;
	height: 100%;
	border: 0px;
	margin: 0px;
	padding: 0px;

}



.insideDiv3{
	float: left;
	background-color: green;
	width: 33%;
	height: 100%;
	border: 0px;
	margin: 0px;
	padding: 0px;

}





.img_Fade {
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */

}

JavaScript

$(".img_Fade").hover(
				  function () {
				    $(this).fadeTo("slow" , 1);
				  },
				  function () {
				   $(this).fadeTo("slow" , .5);
				  }
				);