[CSS]クールなエフェクトを伴って、CSS3アニメーションで画像を拡大するスタイルシート

CSS3アニメーションでレイヤーをスライドさせ、画像を拡大するスタイルシートを紹介します。

Fancy Image Hover Using CSS3
デモ

対応ブラウザはChrome, Safariで、デモでは四種類のアニメーションが紹介されています。

水平のアニメーション

垂直のアニメーション

天地のアニメーション

四方のアニメーション

実装は下記のようになります。

HTML

<div class='images' id='image1'>
<div class='layer'></div>

<img src='baby.jpg' />
</div>

CSS

ホバー時のレイヤーがクリアされる時間には、0.8sが設定されています。

.images{
	float:left;
	margin-left:-20px;
	margin-right:-20px;
	margin-top:10px;
	-webkit-transform:scale(0.6);/*Initial size of image when page loads*/
	-webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/
}
.images:hover{
	-webkit-transform:scale(0.8);/*When hover on images image size will increased*/
	-webkit-box-shadow:0px 0px 40px #ccc;
}
.images .layer{
	width: 100%;
	height: 100%;
	background-color:#000;
	position: absolute;
	opacity:0.5;
	-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
	width:0%;
}
#image2:hover .layer{
        height:0%;
}
#image3:hover .layer {
	height:0%;
	margin-top:150px;
}
#image4:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
}