SOURCE

<div class="wrapper">
    <ul class="list">
        <li>
            <img src="http://placekitten.com/250/250" alt="">
            <div class="listText">
                <h2>JANE</h2>
                <p>Lorem impsun cold theag must odne the baset col.</p>
            </div>
            <div class="maskup"></div>
            <div class="maskdown"></div>
        </li>
    </ul>
</div>

a:link{ text-decoration: none; }
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }


ul, li{ list-style: none; }


img{
    display: block;
}


.wrapper{
    width: 826px;
    margin: 20px auto;
    border: 1px solid #ccc;
    margin-top: 300px;;
}

.list{
    width: 830px;
    overflow: hidden;
}

.list li{
    position: relative;
    width: 250px;
    height: 250px;
    background: lightpink;
    margin: 10px;
}

.listText{
    position:absolute;
    left: 0;
    top: 50px;
    color: #fff;
    z-index: 2;
    background: rgba(0,0,0,0.5);
}

.listText h2{
    font-size: 2em;
    text-align: center;
    padding-top: 0.7em;
}
.listText p{
    font-size: 1.2em;
    text-align: center;
    line-height:  1.3;
    margin-top: 0.5em;
    padding: 0.7em 0.5em;
    border-top: 2px solid rgba(255,255,255,.5)
}

/* 以上完成动画静态终结画面 */

.listText{
    transform: rotate(45deg);
    height: 0;             /*虽然height设为了0，但是由于存在内容，会被撑开*/
    overflow: hidden;
}
/* 以上完成动画静态初始画面 2*/

.list li:hover .listText{
    height: 180px;
    transform: rotate(0);
}


/* 以上完成动画静态终结画面 */

.listText{
    transition: 0.5s;
}

.list li{ float: left;}
/* 以上完成事件动画 */

/* 添加蒙版动画效果 */
.maskup, .maskdown{
    width: 100px;
    height: 100px;
    background: rgba(12, 18, 95, 0.5);
    position: absolute;
    z-index: 1;    
}
.maskup{
    top: -200px;
    left: -200px;
}
.maskdown{
    bottom: -200px;
    right: -200px;
}
.maskup, .maskdown{
    transform:  rotate(45deg) scale(4);
}

.list li:hover .maskup{ top: -50px; left: -50px; }
.list li:hover .maskdown{ bottom: -50px; right: -50px; }
.maskup, .maskdown{ transition: 0.5s;}
.list li{ overflow: hidden; }