Animated Image Grid with CSS3 Based Hover Caption Effects

Author: brunodsgn
Views Total: 60,775 views
Official Page: Go to website
Last Update: February 27, 2014
License: MIT

Preview:

Animated Image Grid with CSS3 Based Hover Caption Effects – InContent

Description:

InContent 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.

See also  Pure CSS / CSS3 Loading Indicator Collection - Loading Effect

How to use it:

Include required CSS file in the head section of the html document.

<link rel="stylesheet" href="css/sass-compiled.css" />

Include Modrnizr Lib for support of old browsers.

<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.

<!--Effect: Bottom to Top -->
<div class="pic">
<img src="img/01.jpg" class="pic-image" alt="Pic"/>
<span class="pic-caption bottom-to-top">
<h1 class="pic-title">Bottom to Top</h1>
<p>Hi, this is a simple example =D</p>
</span>
</div>

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

See also  Any Element Rotator CSS Library - fillintheblank

Leave a Reply

Your email address will not be published. Required fields are marked *