Pure CSS Gallery with Image Rotate/Expand Effects

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>