JSFiddle - React, Tailwind, and code Playground

by juristr

HTML

<div class="js-cardgroup">
    <div class="card no-animation">Test Hallo b alsdf</div>
    <div class="card no-animation">Test Hallo b alsdf</div>
    <div class="card no-animation">Test Hallo b alsdf</div>
</div>
<a href="#" class="js-btn">test</a>

CSS

body {
    background: gray;
}
.card {
    min-height: 150px;
    z-index: 10;
    outline: none;
    overflow: hidden;
    // width: 400px;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-bottom:15px;
}
.collapsed > .card {
    height: 20px;
    min-height: 20px;
    opacity: 0.5;
    margin-bottom:0;
    -webkit-transition: all 500ms cubic-bezier(0.700, 0.105, 0.320, 0.930);
    -moz-transition: all 500ms cubic-bezier(0.700, 0.105, 0.320, 0.930);
    -o-transition: all 500ms cubic-bezier(0.700, 0.105, 0.320, 0.930);
    transition: all 500ms cubic-bezier(0.700, 0.105, 0.320, 0.930);
    /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.700, 0.105, 0.320, 0.930);
    -moz-transition-timing-function: cubic-bezier(0.700, 0.105, 0.320, 0.930);
    -o-transition-timing-function: cubic-bezier(0.700, 0.105, 0.320, 0.930);
    transition-timing-function: cubic-bezier(0.700, 0.105, 0.320, 0.930);
    /* custom */
}

.card.no-animation 
{
  animation: none;
}

JavaScript

$(function () {

    $('.js-cardgroup').on({
        mouseenter: function () {
            $('.card').removeClass('no-animation');
            $('.js-cardgroup').removeClass('collapsed');
        },
        mouseleave: function () {
            $('.js-cardgroup').addClass('collapsed');
        }
    })


    $(".js-btn").click(function () {
        $(".js-cardgroup").toggleClass("collapsed");
    });

});