@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0}
.grid {margin: 45px 0; width:1000px}

/* Common style */
.grid figure {position: relative;z-index: 1;display: inline-block;overflow: hidden;width: 238px;height: 247px;background: #000;
cursor: pointer; float:left}
.grid figure figcaption {padding: 2em;color: #fff;text-transform: uppercase;-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.grid figure figcaption,
.grid figure a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.grid figure h2 { font-weight:300; font-size:20px}
.grid figure p { font-size:14px; line-height:23px; width:190px}

figure.effect-sarah img {width: -webkit-calc(100% + 20px);width: calc(100% + 20px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);-webkit-backface-visibility: hidden;backface-visibility: hidden;
}
/*图片左移*/
figure.effect-sarah:hover img {opacity: 0.4;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

figure.effect-sarah h2 a{ color:#fff}
figure.effect-sarah h2{
	position: relative;
	overflow: hidden;
	padding: 0.5em 0;
	width:190px; height:18px;color:#fff
}

figure.effect-sarah h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0); 
}


figure.effect-sarah:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.effect-sarahs{ margin-right:16px;}