CSS3で画像をマウスオーバーするとボーダーがぐいってなるアニメーション
Posted: 2011.07.28 / Category: HTML&CSS / Tag: CSS3, アニメーション
Flashサイトではよく見かけていると思いますが、画像にマウスオーバーするとボーダーが内側にアニメーションするあれをCSS3でやってみました。
Webkit系列やOperaでご覧下さい。Firefoxだとがたがたします、、、、
Sponsored Link
HTML
適当なクラス名をa要素につけます。
html
<a class="img-over" href="#"><img src="http://jsdo.it/static/assets/svggirl/09/material.svg" width="320" height="200" /></a>
CSS
cssのborderは普通外側につきますが、ボーダーの太さを、imgのネガティブマージンにすることで現在と同じサイズでボーダーをつけることができます。
css
a.img-over,
a.img-over img {
overflow: hidden;
float: left;
margin: 0;
border: 0px solid #CCCCCC;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
a.img-over:hover {
border: 10px solid #CCCCCC;
}
a.img-over:hover img {
margin: -10px;
}
