*{
	margin:0;
	padding:0;
	
	}

	
main{
	width:340px;
	margin:100px auto 0 auto;
	
	}

.box{
	width:340px;
	height:497px;
	border:0px solid #fff;
	overflow:hidden;
	position:relative;
	float:left;
	margin:0px 0px 0px 0px;
	cursor:pointer;
	
	}
	
.box img,div{
	overflow:hidden;
	
	
	}
.box div{
	background-color:#000;
	width:340px;
	height:497px;
	padding-top:0px;
	text-align:center;
	
	}
.efect-1{}
.efect-1 div{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transition:opacity 0.5s;
	}
.efect-1:hover div{
	opacity:0.7;
	}
	
.efect-2{}
.efect-2 img{
	position:absolute;
	top:0;
	left:0;
	transition:margin-left 1s;
	}
.efect-2:hover img{
	margin-left: 200px;
	}
	
.efect-3{}
.efect-3 div{
	position:absolute;
	top:0;
	left:0;
	opacity:0.3;
	margin-left:-200px;
	transition:margin-left 1s;
	}
.efect-3:hover div{
	margin-left: 0;
	}

.efect-4{}
.efect-4 div{
	position:absolute;
	top:0;
	left:0;
	opacity:0.4;
	transform:scale(0);
	transition-duration:1s;
	}
.efect-4:hover div{
	transform:scale(1);

	transition-duration:1s;
	}