JSFiddle - React, Tailwind, and code Playground

by skeurentjes

HTML

<ul class="sliderHome">
                <li>
            <ul class="slide">
                        <li>
                <span class="card">
                    <span class="front">
                        <img src="http://localhost/www.wijzijnbm.nl/wms/fm/userfiles/content/alkmaaraholdeurope01zwthumb.jpg" title="" alt="" />
                        <img class="animation" src="http://localhost/www.wijzijnbm.nl/wms/fm/userfiles/content/alkmaaraholdeurope01thumb.jpg" title="" alt="" />
                        <span class="slideCaption animation ellipsis">Albert Hein</span>
                    </span>
                    <span class="back">
                        <span class="backContent">
                            <h4 class="cardTitle ellipsis">Ahold Europe RE&amp;C Real Estate Development</h4>
                            <p class="cardWaar"><em>Waar:</em><br/>
                            Alkmaar</p>
                            <em class="cardISM">In samenwerking met:</em>
                            <ul class="cardISMListing">
                                                                    <li>- <a href="http://hpu.nl" title="HPU internet services" target="_blank">HPU internet services</a></li>
                                                                        <li>- <a href="https://www.slingeland.nl" title="Instore Broadcast" target="_blank">Instore Broadcast</a></li>
                                                                        <li>- <a href="http://www.roothaangroep.nl" title="Scouting Roothaangroep" target="_blank">Scouting Roothaangroep</a></li>
                                                                </ul>
                            <a href="" title="Lees meer" class="cardLink">Meer over dit project</a>
                            <span class="closeSlide"></span>
                        </span>
                    </span>
                </span>
                                </li>
                        <li>
               ...

CSS

.sliderHome {
    position: relative;
    font-size: 0;
    line-height: 0;
}

    .sliderHome > li {
        margin-right: 0.13%;
    }

        .slide li {
            position: relative;
            display: inline-block;
            width: 32.5%;
            padding-bottom: 21.53%;
            margin: 0 1% 1% 0;
            opacity: 1;
            cursor: pointer;

            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            -o-perspective: 800px;
            -ms-perspective: 800px;
            perspective: 800px;
        }

        .slide li.invisible {
            opacity: 0;
        }

        .slide li.showOtherImages {
            cursor: default;
        }

        .slide li:nth-of-type(3),
        .slide li:nth-of-type(6) {
            margin-right: 0;
        }

            .slide li img {
                position: absolute;
                opacity: 0;
                max-height: 163px;
                width: 100%;
                height: auto;
                top: 0;
                left: 0;
                display: none;
                z-index: 15;
            }

            .slide li .card img:nth-child(1) {
                opacity: 1;
                display: block;
            }

            .slide li .card img:nth-child(2) {
                display: block;
            }

            .slide li.active .card img:nth-child(2) {
                display: block;
                opacity: 1;
                transform: scale(1.4);
                -webkit-transform: scale(1.4);
            }

                .slide li .slideCaption {
                    position: absolute;
                    bottom: -30px;
                    left: 0;
                    display: block;
                    width: 76%;
                    padding: 5px 12%;
                    font-family: 'bankgothicbold';
                    font-size: 14px;
                    text-align: center;
                    line-height: 20px;
                   ...

JavaScript

$('.slide li').hover(function() {
    $(this).toggleClass('active');
});

var slideFlipped = false;

$('.slide > li').click(function() {
    if(!slideFlipped) {
        $('.card').removeClass('flipped');
        $(this).find('.card').addClass('flipped');
        $(this).addClass('showOtherImages');
        $(this).find('.otherImage').show();
        $('.slide > li').addClass('invisible');
        $(this).removeClass('invisible');
        
        setTimeout(function() {
            slideFlipped = true;
        }, 100);
        
    }
});

$('.closeSlide').click(function(){
    $('.card').removeClass('flipped');
    $('.slide> li').removeClass('showOtherImages, invisible');
    $('.otherImage').hide();
    
    setTimeout(function() {
        slideFlipped = false;
    }, 100);
});