Image with switching title and caption on hover

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

Demo

Image

Html Quiz

Test Your Html Skills

You Can Test Your Html Skills With HTML Lion Quiz.

Image

Css Quiz

Test Your Css Skills

You Can Test Your Css Skills With HTML Lion Quiz.


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");
        }
);
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.