CSS3 Transitions allow browser to animate HTML elements through the change of CSS properties. In other words, we can create animations in webpage without JavaScript but just with pure CSS.

The Idea

The idea is to have an image gallery that will slightly ‘zoom-in’ with an overlay, and display the image description when hover over, else no overlay created and the description will stay in ‘blur’ effect.

CSS3 Transitions Basic

As usual, before get started with markup let’s go through the basic of CSS3 transitions first. CSS3 Transition supports four different properties, which are property name, duration, easing and delay.

div
{
   transition-property: width;
   transition-duration: 1s;
   transition-timing-function: ease;
   transition-delay: 1s;
   /* Firefox 4 */
   -moz-transition-property: width;
   -moz-transition-duration: 1s;
   -moz-transition-timing-function: ease;
   -moz-transition-delay: 1s;
   /* Safari and Chrome */
   -webkit-transition-property: width;
   -webkit-transition-duration: 1s;
   -webkit-transition-timing-function: ease;
   -webkit-transition-delay: 1s;
}

Anyhow, you may group all of them using CSS3 Transition shorthand property.

div
{
   transition: width 1s ease 1s;
   /* Firefox 4 */
   -moz-transition:width 1s ease 1s;
   /* Safari and Chrome */
   -webkit-transition:width 1s ease 1s;
}

Read more:http://www.inwebson.com/css3/fancy-image-gallery-with-css3-transitions/