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

/*

TABLE OF CONTENTS

1.a, 1.b INFORMATION BOX
2. LOMO EFFECT
3.a, 3.b OVERLAYS
4. IMAGES STACKS
5. FULL OVERLAY

*/



/* DEFAULTS PAGE STYLING - FOR DEMO ONLY */

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




/*  _______________________________________

	1.a, 1.b INFORMATION BOX
    _______________________________________  */



.info {
	width: auto;
	float: left; 
	display: inline;
	padding: 0;
	position: relative;
}
	.info:hover {
		z-index: 99;
	}
.info img {
	position: relative;
	
	/* Set an opacity for the default state */
	filter: alpha(opacity=70);
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
.info:hover img{
	z-index: 999;
	
	/* Enabling a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.details {
	position: absolute;
	left: -10px;
	top: -10px;
	/* Set the following width according to the size of your images */
	width: 270px;
	/* Hiding the DIV */
	display: none;
	/* Rounded corners */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding-top: 273px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	filter: alpha(opacity=85);
	opacity: 0.85;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	height: 100px;	
}
.info:hover .details {
	/* Showing on mouse hover */
	display: block;
}
/* Styling for the black variant */
.black {
	background: #000000;
}
	.black h2, .black p {
		color: #ffffff;
	}
/* Styling for the white variant */
.white {
	background: #ffffff;
}
	.white h2, .white p {
		color: #000000;
	}



/*  _______________________________________

	2. LOMO EFFECT
    _______________________________________  */



.lomo {
	position: relative; 
	display: inline-block;
}                    
.lomo img {
	display: block;
}  
.lomo:hover:after {
	/* The box shadow is set to black and mkes the nice inner glowing
	   effect on mouse hover */
	-moz-box-shadow: inset 0 0 80px #000000;  
	-webkit-box-shadow: inset 0 0 80px #000000;   
	box-shadow: inset 0 0 80px #000000;
	/* Positionning this black glow on mouse hover */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;  
	z-index: 2;              
	content: "";
} 



/*  _______________________________________

	3.a, 3.b OVERLAYS
    _______________________________________  */



.overlay {
	position: relative; 
	display: inline-block;
}                    
	.overlay img {
		display: block;
	}  
.overlay .description {
	position: absolute;
	left: 0px; 
	width: 100%;
	
	/* Setting a zero opacity so we have a nice fading effect on mouse hover */
	filter: alpha(opacity=0);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	/* Semi-transparent background for modern browsers, black for older browsers */
	background:#000000;
	background: rgba(0,0,0,0.8);
	/* CSS3 transition, makes the fading effect */ 
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
}
	.description p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
.overlay:hover .description {
	/* Setting a 100% opacity on mouse hover */
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* Aligning to the bottom of the image */
.bottom {
	bottom: 0px;
}
/* Aligning to the top of the image */
.top {
	margin-left: -20px;
}



/*  _______________________________________

	4. IMAGES STACKS
    _______________________________________  */



.stack {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:300px;
	height:200px;
}
	.stack img {
		position:absolute;
		left:0;
		/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
		transition: opacity 0.4s ease-in-out;
	}
	.stack img.top:hover {
		/* Set a 0 opacity to the top image and reveal the other image */
		filter: alpha(opacity=0);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}



/*  _______________________________________

	5. FULL OVERLAY
    _______________________________________  */



.full_overlay {
	position:relative;
	/* Set the width and the height according to the size of your pictures */
	width:285px;
	height:375px;
	float: left;
	list-style-image: none;
	list-style-type: none;
}
.full_overlay p {
	color:#FFFFFF;
	padding:10px;
}
	.full_overlay .content {
	/* Set the width and the height according to the size of your pictures */
		width: 285px;
	height:375px;
	/* Set a 0 opacity to hide the content */
		filter: alpha(opacity=0);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	/* Semi-transparent background for modern browsers, black for older browsers */
		background:#000000;
	background: rgba(0,0,0,0.8);
	/* CSS3 transitions, creates the fading effect */
		-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	left: 0px;
	list-style-image: none;
	float: left;
	position: absolute;
	margin-left: 20px;
	}
	.content h2, .content p {
		/* Text styling */
		padding:10px;
		color:#ffffff;
	}
	.full_overlay:hover .content {
	/* Setting a 100% opacity on mouse hover to show the content */
		filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	margin-left: 20px;
	}