/*
Item Name : HoverMe - Collection of CSS3 Hover Effects
Author URI : http://themeforest.net/user/Keliah
Version : 1.0
*/

/*

TABLE OF CONTENTS

01 SIMPLE BORDER
02 SHADOW & ZOOM
03 BORDER & ZOOM

*/



/* DEFAULTS PAGE STYLING - FOR DEMO ONLY */

/* You can safely remove / modify the following markup as it's only for the demo purpose */



/*  _______________________________________

	02 SHADOW & ZOOM
    _______________________________________  */



.zoom img {
	/* CSS3 transitions to resize the image and set a glow,
	   the "scale" is the ratio to resize the image, the box shadow
	   is the glow effect and the duration the timing of the effect
	   on mouse hover */
	-webkit-transform:scale(0.9);
	-webkit-box-shadow:0px 0px 30px #888;
	-webkit-transition-duration: 0.5s;
	-moz-transform:scale(0.9);
	-moz-box-shadow:0px 0px 30px #888;
	-moz-transition-duration: 0.5s;
	-o-transform:scale(0.9);
	-o-transition-duration: 0.5s;
	box-shadow:0px 0px 30px #888;
}
.zoom img:hover{
	/* On pouse hover, the scale mkes the image grow
	   and the box shadow makes the glow lighter with the #666666 color */
	-webkit-box-shadow:0px 0px 30px #666666;
	-webkit-transform:scale(1.2);
	-moz-box-shadow:0px 0px 30px #666666;
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	box-shadow:0px 0px 30px #666666;
	cursor:pointer;
	
}