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 */
    width: 100%;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -webkit-backface-visibility: hidden;
}

.img_Fade:hover {
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}