Image with switching title and caption on hover

For example, Image with switching title and caption on hover...

Demo

HTML

<figure class="blockImg hover"> <img src="img/switching-img.jpg" alt="Image" />
        <figcaption>
                <h2>Html Quiz</h2>
                <h3>Test Your Html Skills</h3>
                <p>You Can Test Your Html Skills With <strong>HTML Lion Quiz</strong>.</p>
        </figcaption>
        <a href="#"></a> 
</figure>

<figure class="blockImg"> <img src="img/switching-img-2.jpg" alt="Image" />
        <figcaption>
                <h2>Css Quiz</h2>
                <h3>Test Your Css Skills</h3>
                <p>You Can Test Your Css Skills With <strong>HTML Lion Quiz</strong>.</p>
        </figcaption>
        <a href="#"></a> 
</figure>

CSS

<style>
    .blockImg { 
            background-color: #1A1A1A; 
            color: #FFF; 
            font-size: 16px; 
            text-align: left; 
            margin: 10px 1%; 
            width: 48%; 
            position: relative; 
            float: left; 
            overflow: hidden; 
    }
    .blockImg * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.45s ease;
            transition: all 0.45s ease;
    }
    .blockImg img { 
            vertical-align: top;  
            max-width: 100%; 
            width: 100%;  
            backface-visibility: hidden; 
    }
    .blockImg figcaption { 
            background-color: #202123; 
            padding: 15px; 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            z-index: 1;
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.5);
            box-shadow: 0 0 50px rgba(0,0,0,0.5);
    }
    .blockImg h2, 
    .blockImg h3 { 
            font-family: "Times New Roman", serif;
            line-height: 100%; 
    }
    .blockImg h2 { 
            font-size: 1.6em; 
            color: #FDD921; 
    }
    .blockImg h3 { 
            font-size: 1em; 
            color: #EBEBEB; 
            font-weight: normal; 
            letter-spacing: 1px; 
    }
    .blockImg p { 
            font-size: 0.9em; 
            line-height: 1.5em; 
            border-top: 1px solid rgba(255, 255, 255, 0.2);  
            margin-top: 12px;  
            padding: 12px 0 15px; 
    }
    .blockImg a { 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            z-index: 1; 
    }
    .blockImg:hover > img, 
    .blockImg.hover > img { 
            -webkit-transform: translateY(100%); 
            transform: translateY(100%);
    }
    .blockImg:hover figcaption, 
    .blockImg.hover figcaption { 
            -webkit-transform: translateY(0%); 
            transform: translateY(0%);
    }
    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
            .blockImg { 
                    width:100%; 
                    margin:0 0 15px 
            }
    }
</style>

Javascript

/* Demo purposes only */
$(".hover").mouseleave(
        function () {
                $(this).removeClass("hover");
        }
);