JSFiddle - React, Tailwind, and code Playground

by Geoffrey

HTML

<figure>
        <img src="http://genk2.vcmedia.vn/qHYx0eDsUHhZXXxDGFrAWJ0bYJgWc/Image/2012/01/ava1_95c69.jpg" width="440" height="275">
<figcaption>Designer avec class, c'est trop stylé !</figcaption>
</figure>

CSS

figure {
    position:relative;
    overflow:hidden;
    width:440px;
    height:275px;
}
figcaption {
    position:absolute;
        left:0; right:0; bottom: -20%;
    margin:0;
    padding:10px 15px;
    background-color:rgba(0,0,0,0.6);
    color:#fff;
    font-family:arial;
    -webkit-transition:all 0.2s ease-in-out;
       -moz-transition:all 0.2s ease-in-out;
            transition:all 0.2s ease-in-out;
}
figure img {
    -webkit-transition:all 0.2s ease-in-out;
       -moz-transition:all 0.2s ease-in-out;
            transition:all 0.2s ease-in-out;
}
figure:hover img {
    -webkit-filter: blur(1px);
    -webkit-transform: scale(1.1) rotate(2deg);
       -moz-transform: scale(1.1) rotate(2deg);
            transform: scale(1.1) rotate(2deg);
}
figure:hover figcaption { bottom: 0; }


/* FIORITURES */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }
figure { margin:20px auto; box-shadow:0 5px 20px #aaa; }