JSFiddle - React, Tailwind, and code Playground

by borglinm

HTML

<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>

CSS

#Footer_Container {
    width: 100%;
    height: 20%;
}
.insideDiv1 {
    float: left;
    background-color: blue;
    width: 33%;
    height: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.insideDiv2 {
    float: left;
    background-color: orange;
    width: 33%;
    height: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.insideDiv3 {
    float: left;
    background-color: green;
    width: 33%;
    height: 100%;
    border: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.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);
     });