Pure CSS Gallery with Image Rotate/Expand Effects

Author: bkaezarag
Views Total: 1,582 views
Official Page: Go to website
Last Update: September 21, 2014
License: MIT


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>

Leave a Reply

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