Pure CSS Gallery with Image Rotate/Expand Effects

Category: CSS & CSS3 , Gallery | September 21, 2014
Views Total:1,607 views
Official Page:Go to website
Last Update:September 21, 2014


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>

You Might Be Interested In:

Leave a Reply