JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<div class="imgfade">
Camps<br /><a href="camps.html" class="slide"><img src="images/camps.png"/></a>

</div>

<div class="imgfade">
Team<br /><a href="team.html" class="slide"><img src="images/team.png"/></a>
</div>

<div class="imgfade">
Events<br /><a href="events.html" class="slide"><img src="images/contact.png"/></a>
</div>

CSS

.imgfade {float:left; padding:20px; width:340px; height:350px; text-align:center; 
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
    font:45px century gothic;text-decoration:none;color:#cc9933; }


/*Jquery Link Opacity CSS*/

.faded {opacity:.2;}

JavaScript

$(document).ready(function() {
    
    $('.imgfade').hover(
        
        // on mouse over, find all the .slides,
        // except this one
        // and add the faded class
        function() {
            $(this).siblings().addClass('faded');
        },
        
        // on mouse off, find all the slides
        // and remove the faded class.
        function() {
            $('.imgfade').removeClass('faded');
        }
    );
    
});