CSS3 Animated Gallery | Lessoncup Programming Blog

Monday, 21 October 2013

CSS3 Animated Gallery

This lesson will show you how to make a animated gallery using css3 without using any javascript. in css3 have lot of elements to animated the objects . we can build various mouse hover image effects. web kit filters are more attractable and we can give the good look to objects using blur, brightness, gray scale and other things. let's see the lessons.




HTML

take the images into the list items and give the class name to LI tag. the first class name is .image to manage the style of image and second class is for animated effect for each one image.
<ul>

<li class="image big"><img src="1.jpg"></li>

<li class="image slide"><img src="2.jpg"></li>

<li class="image blur"><img src="3.jpg"></li>

<li class="image bw"><img src="4.jpg"></li>

<li class="image topslide"><img src="5.jpg"></li>

<li class="image round"><img src="6.jpg"></li>

</ul>

CSS

here i am using some css elements to animate the objects like transition,-webkit-filter,margins and border radius.
<style>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0; padding: 0;
}

body{ font-family:Verdana, Geneva, sans-serif; font-size:14px; text-transform:capilise;}

#gallery{ width:850px; height:600px; border:solid #09C 1px; margin:0 auto; padding:5px;border: 5px solid white;

  -webkit-box-shadow: 1px 1px 1px #111;
  box-shadow: 1px 1px 1px  #111;}

h1{ width:400px; margin:0 auto; margin-bottom:30px;}

ul{ list-style:none; margin:0; padding:0;}

li{ float:left;}


.image{width:220px;
 height:220px;
  margin: 20px;
  overflow: hidden;
  border: 10px solid white;
  cursor: pointer;
  -webkit-box-shadow: 1px 2px 2px #111;
  box-shadow: 1px 2px 2px  #111;
  float:left;}

.big img {
  height: 220px;
  width: 220px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.big img:hover {
  width: 300px;
  height: 300px;
}

.slide img {
 margin:0px;
  -webkit-transition: margin 1s ease;
  -moz-transition: margin 1s ease;
  -o-transition: margin 1s ease;
  -ms-transition: margin 1s ease;
  transition: margin 1s ease;
}

.slide img:hover {
 margin-left:-120px;
}


.blur img {
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.blur img:hover {
 -webkit-filter: blur(2px);
}


.bw img {
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.bw img:hover {
 -webkit-filter: grayscale(100%);
}

.topslide img{
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.topslide img:hover {
 margin-top:-120px;
}


.round{
 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.round:hover {
 border: 20px solid #fff;
  border-radius: 50%;
}


</style>

Live Demo

2 comments :

  1. Bro gallery is superb , i am planning to use it with conjunction of your dynamic image gallery to deal with DB and i would like to know rather than animation can we have modal consisting of full size image on load with fancybox ...Please helpme out

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons