JSFiddle - React, Tailwind, and code Playground

by Ngoc Hieu

HTML

<div id="effect2" class="image">

            <img src="http://3.bp.blogspot.com/-x09nrOl0rvE/UtFlO9DA8wI/AAAAAAAAADc/-zWm_nbNqwg/s1600/effect-2.jpg" />

            <div class="mask"></div>

            <div class="detail">

                <h1 class="title">Hiệu ứng 2</h1>

                <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>

                <a href="#">Xem tiếp</a>

            </div>

        </div>

CSS

.image{
        width: 360px;
        float: left;
        margin: 10px;
        position: relative;
        overflow: hidden;
        height: 240px;
    }
    .image img{
        width: 100%;
    }
    h1.title{
        text-transform: uppercase;
        font-size: 25px;
        font-weight: bold;
        line-height: 25px;
        padding: 10px;
        position: relative;
    }   
    .detail{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        text-align: center;
    }
    p{
        color: #fff;
        padding: 10px;
    }
    a{
        text-decoration: none;
        display: inline-block;
        padding: 10px 15px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border: 1px solid #111;
    }
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
    }

#effect2 .mask{

        width: 200%;

        height: 250%;

        background: rgba(148,170,214,0);

        -webkit-transition:  all 0.2s ease-in-out 0s;

        -moz-transition:  all 0.2s ease-in-out 0s;

        transition: all  0.2s ease-in-out 0s;

        transform: rotate(45deg) translate(150px, 50px);

    }

    #effect2:hover .mask{

        transform: rotate(0deg) translate(-50px,-50px);

        background: rgba(148,170,214,0.7);

    }

    #effect2 .title{

        color: #fff;

        font-weight: bold;

        border-bottom: 1px solid #444;

        padding-bottom: 20px;

        margin: 0 15px;

        transform: rotate(15deg) translate(50px,-100px);

        -webkit-transform: rotate(15deg) translate(50px,-100px);

        -moz-transform: rotate(15deg) translate(50px,-100px);

        transition:  all  0.2s ease-in-out 0.4s;

        -webkit-transition:  all  0.2s ease-in-out 0.4s;

        -moz-transition:  all  0.2s ease-in-out 0.4s;

        position: relative;

    }

 ...