JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div class="top">
<div class="item">
    <img alt="" src="http://conceptmds.com/demo/wp-content/uploads/2015/02/Winter-Glory-30-x-30-cm-1-370x260.jpg">
    <span class="button">Winter Glory <p>30 X 30cm</p></span>
    </div>
    </div>

SCSS

.item {
    width: 388px;
    height: 273px;
    position: relative;
    float: left;
    margin: 0 0 2px 2px;
    cursor: pointer;
    outline: 1px solid transparent;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    img {
        display: block;
        width: 388px;
        height: 273px;
    }    
}

.top {
    width: 1170px;
    margin: 0 auto;
    perspective: 500px;
    
    .item {
        .button {
            content: attr(data-title);
            top: 100%;
            width: 100%;
            height: 50px;
            position: absolute;
            left: 0;
            background: rgba(0, 0, 0,0.7);
            font-size: 22px;
            color: #fff;
            font-weight: 400;
            line-height: 50px;
            padding: 0 0 0 15px;
            text-transform: uppercase;
            -webkit-transform-origin: 0% 0%;
            -webkit-transform: rotateX(-90deg);
            -moz-transform-origin: 0% 0%;
            -moz-transform: rotateX(-90deg);
            -ms-transform-origin: 0% 0%;
            -ms-transform: rotateX(-90deg);
            transform-origin: 0% 0%;
            transform: rotateX(-90deg);
            
            p {
                display: inline-block;
                font-size: 18px;
            }
        }
        
        &.active {
            .button {
                background: rgba(235, 141, 3, 0.7);
            }
        }
        
    }
    
    &.transform-top {
        .item {
            overflow: visible;
            -webkit-transform-origin: 50% 0%;
            -webkit-transform: rotateX(89.99deg) translateY(-100%);
            -moz-transform-origin: 50% 0%;
            -moz-transform: rotateX(90deg) translateY(-100%);
            -ms-transform-origin: 50% 0%;
           ...

JavaScript

$(".item").on("click", function(){
    $(this).addClass("active");
    $(".top").addClass("transform-top");
});