JSFiddle - React, Tailwind, and code Playground

by skeurentjes

HTML

<div class="wrapper">
    <ul class="sliderHome">
                <li>
            <ul class="slide">
                        <li>
                <span class="card">
                    <span class="front">
                        <img src="http://wijzijn.hpu.nl/wms/fm/userfiles/content/alkmaaraholdeurope01zwthumb.jpg" title="" alt="" />
                        <img class="animation" src="http://wijzijn.hpu.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>
                      
                </ul>
...

CSS

.wrapper {
    width: 600px;
    margin: 0 auto;
}

.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 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;
            }

/* SLIDER FLIP */
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: visible;
    z-index: 10;



    /* Set the transition effects */
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    -ms-transition: -ms-transform 0.4s;
    transition: transform 0.4s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.card.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

    .card .front,
    .card .back {
        display: block;
        height: 100%;
        width:...

JavaScript

var slideFlipped = false;

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

$('.closeSlide').click(function(){
    $('.card').removeClass('flipped');
    
    setTimeout(function() {
        slideFlipped = false;
    }, 100);
});