[CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート

画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。

Tutorial for a CSS3 animated hover effect

[ad#ad-2]

• デモ
• 実装

デモ

デモはマウスホバーで、左上からきらっと輝くエフェクトが画像に適用されます。

デモページ

[ad#ad-2]

実装

HTML

画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。

<div class="image_shine">
   <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" />
 <div class="hover_shine"></div>
</div>

CSS

まずは、ラッパーのdiv要素のスタイルです。
エフェクト用のdiv要素用の「position: relative;」がポイントです。

.image_shine{
    width:  200px;
    height: 200px;
    margin: 30px auto;
    position: relative;
    border: 2px solid #666;
}

エフェクト用のdiv要素のスタイルです。
こちらは「position: absolute;」にし、エフェクトが左上部から始まるようにポジションをセットします。

.hover_shine{
    width:100%; height: 100%;
    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);
    position: absolute;
    /*initial position*/
    background-position: -265px 0;
    left:0px; top:0px;
    background-repeat:no-repeat;
    /*css transition*/
    -webkit-transition: background-position .3s ease;
       -moz-transition: background-position .3s ease;
         -o-transition: background-position .3s ease;
            transition: background-position .3s ease;
}
.hover_shine:hover{
    /*Final position*/
    background-position: 10px 0;
}