CSSでマウスホバー時にふわっと端っこがめくれるアニメーション

hoge

コツは
『a:after』にtransitionを設定すること！
と、
『a:hover:after』という記述順番（hoverの後ろにafter）！なのだって。

 

◆HTML

<a href="http://example.com/test.jpg">
<img src="http://example.com/test.jpg">
</a>

◆CSS

a{
	position:relative;
	width:445px;
	display: block;

}
a:after{
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-o-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;

 	 z-index: -1;
	 position: absolute;
 	 content:'';
	 bottom: 10px;
 	 right: 10px;
  	 width: 70%;
  	 top: 80%;
 	 max-width:432px;
}
a:hover:after{
 	 background: #8d8c8c;

	 /*影を入れる*/
 	 -webkit-box-shadow: 0 15px 10px #8d8c8c;
 	 -moz-box-shadow: 0 15px 10px #8d8c8c;
	 box-shadow: 0 15px 10px #8d8c8c;

	 /*回転させる*/
	 -webkit-transform: rotate(3deg);
	 -moz-transform: rotate(3deg);
 	 -o-transform: rotate(3deg);
	 -ms-transform: rotate(3deg);
	 transform: rotate(3deg);

}
a > img{
	margin:0;
	width:100%;
	border:5px solid #FFF;
}