JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="main">
        <div id="list">
            <ul>
                <li data-target="1">Пример 1</li>
                <li data-target="2">Пример 2</li>
                <li data-target="3">Пример 3</li>
                <li data-target="4">Пример 4</li>
                <li data-target="5">Пример 5</li>
            </ul>
        </div>
        <div id="images">
            <img src="http://www.radionetplus.ru/uploads/posts/2013-07/1374306712_krasivye-oboi-1.jpg" alt="Пример 1">
            <img src="http://godzagodom.com/wp-content/uploads/2016/09/idjstyfhjhfsdyklkgd.jpg" alt="Пример 2">
            <img src="http://minionomaniya.ru/wp-content/uploads/2015/09/Картинки-миньонов.jpg" alt="Пример 3">
            <img src="http://bm.img.com.ua/nxs/img/prikol/images/large/3/9/315193.jpg" alt="Пример 4">
            <img src="http://bm.img.com.ua/nxs/img/prikol/images/large/1/2/308321_879389.jpg" alt="Пример 5">
        </div>
    </div>

CSS

html,body{
        height: 100%;
    }
    *{
        margin: 0;
        padding: 0;
    }
    #main{
        width:100%;
        height: 500px;
    }
    #list li:hover:after{
    content: ''; 
    position: absolute; 
    right: -28px; bottom: 0px; 
    border: 18px solid transparent; 
    border-left: 10px solid rgba(0,0,0,0.6);
        transition: .1s;
        transition-delay: .2s;
    }
    #list li:after{
    content: ''; 
    position: absolute; 
    right: -20px; bottom: 0px; 
    border:  18px solid transparent; 
    border-left: 10px solid transparent;
        transition: .1s;
    }
    #list li:hover{
        background: rgba(0,0,0,0.6);
        transition: .2s;
        color: white;
        transform: rotateX(20deg);
    }
    #list li{
        transition: .2s;
        height: 30px;
        background: rgba(0,0,0,0.3);
        color:#EEE;
        border-bottom: 2px solid #EEE;
        transform: rotateX(-20deg);
        padding: 3px;
        margin: 10px;
        list-style-type: none;
        text-align: center;
        font-family:serif;
        user-select:none;
        cursor: pointer;
        font-size: 1.3em;
    }
    #list{
        width: 30%;
        height: 100%;
        float: left;
        overflow: hidden;
    }
    #images img{
        height: 100%;
        margin: auto;
        padding: 30px;
        display: block;
        position:relative;
        box-sizing:border-box;
    }
    #images{
        width: 70%;
        height: 100%;
        padding: 0 30px;
        box-sizing:border-box;
        overflow: hidden;
    }

JavaScript

$(function(){
            $("#main #images img").each(function(i,e){//Не обязательно, но для идеала нужно выставить все картинки в одну скрытую позицию чтобы они с одной скоростью долетали 
                if(i > 0)
                      $(e).css({top:(-$("#main #images img").outerHeight() * i + $("#main #images img").outerHeight()) + "px"});
            });
            
            $("#main #list li").bind("click",function(){
                
                var num = $(this).attr("data-target");//получения номера(в массиве выборки) выбранной картинки
                var el = $("#main #images img")[num-1];//Выбранная картинка
                $("#main #images img").each(function(i,e){
                   if($(e).position().top == 0 && $(el).position().top != 0){
                       var animSpeed = 400;//Скорость анимации в мс
                       var heightContainerImg = $("#main #images img").outerHeight();//Высота контейнера в котором лежат картинки
                       var posHide = (-heightContainerImg * i + heightContainerImg)+ "px";//Позицию в которую переместить(скрыть) текущую (видимую)  картинку 
                       var posShow = -heightContainerImg * (num-1) + "px";// Позиция в которую вывести выбранную в списке картинку
                       $(e).animate({top: posHide},animSpeed,function(){
                           $(el).animate({top: posShow},animSpeed);
                       });
                       return false;
                   }
                });
            });
        })