マウスオーバー時にリンク画像を透過させる

こまいかい部分だけど、これがあるのとないのではクリックしやすさが違う気がするので、変更しました。

【マウスオーバー時にリンク画像を透過させる】
style.cssに以下を追加しました。

/* 追加:リンク画像ホバー時に半透明に */
a img {
border:none;
verticle-align:top;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
opacity: 0.7;     /* 透過レベル */
filter: alpha(opacity=80);
}

 
これでサイト全体で、リンク画像をマウスオーバーした時には画像が半透明になるように出来ました。
参考にしたブログさん:画像マウスオーバー時にゆっくり透過させる方法

いいね!をする
Tweet about this on TwitterShare on Facebook