Animated Image Grid with CSS3 Based Hover Caption Effects – InContent

Preview:

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.

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.