JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<div id="content">
<div class="imgfade">
<a href="camps.html" class="slide">Camp<br /><img src="images/camps.png" width="350"/></a>
</div>

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

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

CSS

.imgfade {float:left; padding:20px; width:340px; height:350px; text-align:center; font-size:45px;text-transform:uppercase;letter-spacing:3px;
    -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;}
.faded {opacity:.6;}

JavaScript

$(document).ready(function() {

                var linkLocation;
                function redirectPage() {
                    if(linkLocation) {
                        window.location.href = linkLocation;
                    }
                }
                $("#content")
                    .css('display', 'none')
                    .fadeIn(500);

                $("a.slide").click(function(e) {
                    e.preventDefault();
                    linkLocation = this.href;
                    $("#content").fadeOut(500, redirectPage);
                });
                
                
                $('.imgfade').hover(
                    function() {
                        $(this).siblings().addClass('faded');
                    },
                    function() {
                        $('.imgfade').removeClass('faded');
                    }
                );

            });