画像にカーソルを乗せたときに画像を変化させる方法

リンクつきの画像にカーソルをあてると、ぼやっとなって「これは”画像リンク”なんだな」ってわかる、あれです。

画像にカーソルを乗せたときに画像を変化させる方法

 

 

設定は面倒なのかと思っていたら、意外にするっとできたのでご紹介します。

プラグインは使用しません。

マウスオーバーしたときに、対象画像が透過するようにcssをちょこっと記載するだけです。

 

style.cssに以下のcssを追加します。

※ CSSで透明度を指定するには「opacity」というプロパティを使用します。ブラウザによって記述が変わるので下記の様な形になります。

a:hover img {
opacity:0.5;
filter:Alpha(opacity=50);
}

 

opacity: 0.5; → SafariやOpera向けの指定、透明度が“50%”
filter:Alpha(opacity=50); → IE向けの指定、透明度が“50%”

という意味になります。

 

簡単だし、画像リンクを使っている場合はぜひ使ってみてください。

 

 

—————

そういえば、最近、自分の好みどストライクのWEBサイトって作ってないなぁ。
もっと、シンプルで色味も暗くて、都会的な(田舎ものなので)テーマを使いたいなぁ。
でも、みんな、もっとかわいらしいほうがいい、とかわかりづらいのは嫌っていうんだよねぇ。

。。。ひとりごとでした。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です