/*  FADE */
.imagebox {
	position: relative;
	width: 408px;
	height: 287px;
	overflow: hidden;
	/* demo styles */
	float: left;
	margin: 15px;
	border: 5px solid #777;
}

	.imagebox img {
		width: 100%;
		height: 100%;
		border: none;
	}
	
	.imagebox .overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("zoom.png") no-repeat 50%;
		opacity: 0;
		-webkit-transition: opacity .4s ease-in;  
		-moz-transition: opacity .4s ease-in;  
		-o-transition: opacity .4s ease-in;  
		-ms-transition: opacity .4s ease-in;  
		transition: opacity .4s ease-in;  
	}
	.imagebox a:hover .overlay {
		opacity: 1;
	}
	.imagebox .zoom-white {
		background-color:rgba(255, 255, 255, 0.7);
	}
	.imagebox .zoom-black {
		background-color:rgba(0, 0, 0, 0.7);
	}


/*  SLIDE  */

.imagebox_slide {
	position: relative;
	width: 408px;
	height: 287px;
	overflow: hidden;
	/* demo styles */
	float: left;
	margin: 15px;
	border: 5px solid #777;
}
	.imagebox_slide img {
		width: 100%;
		height: 100%;
		border: none;
	}
	.imagebox_slide .overlay {
		position: absolute;
		bottom: -300px;
		width: 100%;
		height: 100%;
		background: url("zoom.png") no-repeat 50%;

		-webkit-transition: bottom 0.4s;
		-moz-transition: bottom 0.4s;
		-o-transition: bottom 0.4s;
		-ms-transition: bottom 0.4s;
		transition: bottom 0.4s;
	}
		.imagebox_slide a:hover .overlay {
			bottom: 0;
		}
	.imagebox_slide .zoom-white {
		background-color:rgba(255, 255, 255, 0.7);
	}
	.imagebox_slide .zoom-black {
		background-color:rgba(0, 0, 0, 0.7);
	}
	
/*  CORNER  */
.imagebox_corner {
	position: relative;
	width: 408px;
	height: 287px;
	overflow: hidden;
	/* demo styles */
	float: left;
	margin: 15px;
	border: 5px solid #777;
}
	.imagebox_corner img {
		width: 100%;
		height: 100%;
		border: none;
	}
	
	.imagebox_corner .corner-white,
		.imagebox_corner .corner-black {
		position: absolute;
		width: 0;
		height: 0;
		/* Slide Transition */
		-webkit-transition: all 0.4s;
		-moz-transition: all 0.4s;
		-o-transition: all 0.4s;
		-ms-transition: all 0.4s;
		transition: all 0.4s;
	}
	
	.imagebox_corner .overlay {
		position: absolute;
		width: 150px;
		height: 150px;
		background: url("zoom.png") no-repeat 50%;
	}

  	/* Top Left Ribbon */
	
	.imagebox_corner .corner-white,
	.imagebox_corner .corner-black {
		top: -150px;
		left: -150px;
		border-right: 150px solid transparent;
	}
		.imagebox_corner .corner-white {
			border-top: 150px solid rgba(255, 255, 255, 0.7);
		}
		.imagebox_corner .corner-black {
			border-top: 150px solid rgba(0, 0, 0, 0.7);
		}
	
	.imagebox_corner:hover .corner-white,
	.imagebox_corner:hover .corner-black {
		top: 0;
		left: 0;
	}
  
	.imagebox_corner .overlay {
		top: -170px;
		left: -35px;
	}
	

/*  SHADOW  */
.imagebox_shadow {
	position: relative;
	width: 408px;
	height: 287px;
	top: 0;
	overflow: hidden;
	/* demo styles */
	float: left;
	margin: 15px;
	border: 5px solid #777;
}
.imagebox_shadow img {
	width: 100%;
	height: 100%;
	border: none;
}
.imagebox_shadow.small, .imagebox_shadow.large {
	box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.8);
	-webkit-transition: all .2s ease-in;
	   -moz-transition: all .2s ease-in;
	     -o-transition: all .2s ease-in;
	    -ms-transition: all .2s ease-in;
	        transition: all .2s ease-in;
}
.imagebox_shadow.small:hover {
	top: -5px;
	box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.8);
}
.imagebox_shadow.large:hover {
	top: -10px;
	box-shadow: 0 20px 15px -10px rgba(0, 0, 0, 0.8);
}
  
.imagebox_caption {
	position: relative;
	width: 408px;
	height: 287px;
	overflow: hidden;
	/* demo styles */
	float: left;
	margin: 15px;
	border: 5px solid #777;
}
.imagebox_caption img {
	width: 100%;
	height: 100%;
	border: none;
}
.imagebox_caption.white figcaption,
.imagebox_caption.black figcaption {
	position: absolute;
	width: 367px;
	left: -50px;
	bottom: -150px;
	padding: 30px 70px 50px;
	border-radius: 300px / 50px;
	-webkit-transition: all .2s ease-out;
	   -moz-transition: all .2s ease-out;
	     -o-transition: all .2s ease-out;
	    -ms-transition: all .2s ease-out;
	        transition: all .2s ease-out;
}

.imagebox_caption:hover figcaption {
	bottom: -35px;
}
.imagebox_caption.white figcaption {
	background-color: rgba(255, 255, 255, 0.7);
}
.imagebox_caption.black figcaption {
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
}