Latest Movie :

Free awesome Animated Image Grid with CSS3

Animated Image Grid with CSS3 Based Hover Caption Effects – InContent

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.
1<!--Effect: Bottom to Top -->
2<div class="pic">
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>
7</span>
8</div>

That’s it. Free free to edit CSS file to create your own styles & hover effects.
Share this article :

Post a Comment

PLEASE DON'T PLACE BULK MESSAGE , FOR ADVERTISING!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogging Trainings - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger