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

Html Quiz
Test Your Html Skills
You Can Test Your Html Skills With HTML Lion Quiz.

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"); } );