Pure CSS Gallery with Image Rotate/Expand Effects

Category: CSS & CSS3 , Gallery | September 21, 2014
Author: bkaezarag
Views Total: 2,512
Official Page: Go to website
Last Update: September 21, 2014
License: MIT

Preview:

Pure CSS Gallery with Image Rotate/Expand Effects

Description:

Helps you to create an overlapping or justified image gallery with CSS3 powered rotate or expand effects.

How to use it:

Include the style-expand-effect.css for expand effects or the style-rotate-effect.css for rotate effects.

<link rel="stylesheet" href="style-expand-effect.css">
<link rel="stylesheet" href="style-rotate-effect.css">

Just wrap your images for the gallery into a container element with CSS class of ‘gallery’ and you’re done.

<div class="gallery">
  <a href="javascript:void(0)"> <img class="img01" src="1.jpg"/> </a>
  <a href="javascript:void(0)"> <img class="img02" src="2.jpg"/> </a>
  <a href="javascript:void(0)"> <img class="img03" src="3.jpg"/> </a>
  <a href="javascript:void(0)"> <img class="img04" src="4.jpg"/> </a>
  <a href="javascript:void(0)"> <img class="img05" src="5.jpg"/> </a>
</div>

You Might Be Interested In:


Leave a Reply