小技集

【CSS】マウスオーバー時にゆっくりと透過させる方法

  • このエントリーをはてなブックマークに追加

当サイトのTOPページでも使っているCSSの小技です。
最近多くのサイトで見かけ、使うことも多いと思いますので、忘備録がてら書いておきます。

デモ

マウスオーバー時に時間をかけてゆっくりと透過させた画像

マウスオーバーするとゆっくりと透過することが分かると思います。

作成コード

HTML

<a href="遷移先URL">
       <img src="画像URL" alt="画像代替テキスト">
</a>

CSS

a img{
       -webkit-transition: 0.2s ease-in-out;  
       -moz-transition: 0.2s ease-in-out;  
       -o-transition: 0.2s ease-in-out;  
       transition: 0.2s ease-in-out;
}
a img:hover{
       opacity:.8;
       filter: alpha(opacity=20);
}

もちろん応用を効かせることもできるので、是非ご活用下さい。

  • このエントリーをはてなブックマークに追加

コメントを残す

*

CAPTCHA