CSSだけで作る、コーナーからレイヤーがスライドするエフェクト

画像の角から、マウスホバーでレイヤーが全体にスライドするようなエフェクトを作りたかった。
で、参考にしたのはこちら。
http://codepen.io/davidleininger/details/FuitG

SASSで書かれていたのでCSSに書き直したり、三角の位置変えてみたり。
あとリンクにしたかったのでa要素に変えてみたり。
IE10だとa要素を調整しないともれなく説明文が消える。
IE9以下はtransition未対応なのでホバー時に一瞬でエフェクトが表示される。
~~つまりIEなぞ知るか。~~
Firefoxだと角の見出しがホバー時にぶれる。これ原因特定してない。
あとSEO対策とかブロックレベル要素とかインライン要素とか考慮してない。すまない。

HTML側

とりあえず枠を作る。構成は以下の通り。
・box
　全体の外枠。
・overlay
　角の部分。ホバーで対角線上に向かって広がっていく。
・corner-overlay-content
　角の上に表示するテキスト。見出しとか。ホバー時には消える。
・overlay-content
　ホバーで表示されるコンテンツを入れるための枠。
・description
　ホバーで表示される説明テキスト。今回はリンクにしたかったのでa要素に。

<div class="box">
	<div class="overlay"></div>
	<div class="corner-overlay-content">NEW</div>
	<div class="overlay-content">
		<a class="description" href="#">ここに画像の説明とか入れたらいいんじゃないかな！！</a>
	</div>
</div>

CSS側

構成した各要素にぺしぺしスタイルを指定する。
コメントでちょっとだけ解説。
コーナーの位置についてはrightにしているpositionをleftにしたりtopをbottomに変えたりすればよい。

/* 外枠部分 */
.box {
	position: relative;
	overflow: hidden;
	/* 大きさや背景は適宜変更する */
	width: 300px;
	height: 300px;
}
/* コーナー部分 */
.box .overlay {
	border-top: 46px solid #E60012;
	border-right: 46px solid transparent;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	opacity: 1;
	-moz-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
}

/* コーナー部分(ホバーでスライド) */
.box:hover .overlay {
	/* 大きさを外枠の2倍にする */
	border-top: 600px solid #E60012;
	border-right: 600px solid transparent;
	opacity: 0.7;
	-moz-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
}

/* コーナーに表示する文字 */
.box .corner-overlay-content {
	position: absolute;
	top: 7px;
	left: 2px;
	font-size: 12px;
	color: #FFFFFF;
	/* 角に合わせて斜めにする */
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
}
/* コーナーに表示する文字(ホバーで非表示に) */
.box:hover .corner-overlay-content {
	opacity: 0;
	-moz-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
}

/* ホバー時に表示するコンテンツ */
.box .overlay-content {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	opacity: 0;	/* 初期状態は非表示 */
	position: absolute;
	-moz-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
}

/* ホバー時に表示するコンテンツ(ホバーで表示する) */
.box:hover .overlay-content {
	opacity: 1;
	-moz-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-moz-transition-delay: 0.3s;
	-webkit-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
}

/* 説明テキスト(初期状態は非表示) */
.overlay-content a {
	text-decoration: none;
	opacity: 0;
	padding: 30px;
	/* サイズを外枠に合わせる */
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
}
/* 説明テキスト(ホバーで表示) */
.overlay-content a:hover {
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 12px;
	outline: 0 none;
	opacity: 1;
}