Here is InContent which is a pure CSS grid layout built with LESS/SASS for creating a responsive & animated image grid gallery that comes with lots of CSS3 based image caption hover effects like rotate, flip, slide, etc. It currently works perfectly on modern browsers that supports CSS3 transition and transform properties.we will fee good to have you back on this website.keep visiting. below is description of this hover effect.
using :
Include required CSS file in the head section of the html document.
1 | < link rel = "stylesheet" href = "css/sass-compiled.css" /> |
Include Modrnizr Lib for support of old browsers.
1 | < script src = "libs/modernizr.js" type = "text/javascript" ></ script > |
Create the html for an image gallery. Add CSS class to image caption element to specify the hover effect.
3 | < img src = "img/01.jpg" class = "pic-image" alt = "Pic" /> |
4 | < span class = "pic-caption bottom-to-top" > |
5 | < h1 class = "pic-title" >Bottom to Top</ h1 > |
6 | < p >Hi, this is a simple example =D</ p > |
That’s it. Free free to edit CSS file to create your own styles & hover effects.