.sample12 {
 /*
	width:			336px;
	height:			336px;
     */
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample12 .caption {
	width:			100%;
	height:			100%;
	visibility:		hidden;	/* 文字を表示しない */
	font-size:		130%;
	color:			#fff;
	top:			0;
	left:			0;
	position:		absolute;
	text-align:		center;
	-webkit-transition:	all 0.4s step-end;
	transition:		all 0.4s step-end;
}
.sample12:hover .caption {
	visibility:		visible;	/* 文字を表示する */
}
.sample12 .caption p {
	font-size:		130%;
	padding-top:		75px;
	color:			#fff;
	opacity:		0;	/* ホバーが解除された時すぐ消えるように、文字を表示しない */
}
.sample12:hover .caption p {
	opacity:		1;	/* 文字を表示する */
}
.sample12 .mask1, .sample12 .mask2 {
	width:			100%;
	height:			50%;	/* 高さは半部のサイズ */
	position:		absolute;
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample12 .mask1 {
	top:			-50%;	/* 枠の上に置いて表示させない */
}
.sample12:hover .mask1 {
	top:			0;	/* 下にずらして表示する */
}
.sample12 .mask2 {
	bottom:			-50%;	/* 枠の下に置いて表示させない */
}
.sample12:hover .mask2 {
	bottom:			0;	/* 上にずらして表示する */
}

.zoom_box{
 width:300px; // サイズがサンプルなので適時変更してください。
 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。
 overflow:hidden; //これを記述することではみ出た部分を非表示にします。
}
.zoom_box img{
 transition:1s all;
}
.zoom_box img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}


.sample10 {
    margin-top: 0px;
    margin-left: 0px;
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample10 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		10px;
	text-align: 		left;
}
.sample10 .mask {
	width:			100%;
	height:			50px;
	position:		absolute;
	top:			-50px;	/* 枠の上に置いて表示しない */
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample10:hover .mask {
	top:		0px;	/* 下に降りてくるように見せる */
}
.sample10 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	-webkit-transform:	scale(1.2);	/* 1.2倍の大きさで表示 */
	transform:		scale(1.2);
}
.sample10:hover img {
	margin-top:		50px;			/* 画像の絵を下にずらす */
	-webkit-transform:	scale(1);	/* 元の大きさに戻す */
	transform:		scale(1);
}

.sample8 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample8 .caption {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		80px;
}
.sample8 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateY(-180deg);
	transform:		rotateY(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample8:hover .mask {
	-webkit-transform:	rotateY(0deg);
	transform:		rotateY(0deg);
	opacity:		1;	/* ホバーで表示する */
}