タグ別アーカイブ: css

画像のマウスオーバーを簡単に行うCSS設定

画像のマウスオーバーっていろいろと方法がありますが、
結構めんどくさかったりしますよね。

そんな時はこいつをCSSにぶち込んでみましょう!

a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}

たったこれだけで画像にマウスオーバーと、
なんだかいい感じに仕上がります♪

ただ、マウスオーバーで色を変えたり、
(ex:カラ― → モノクロ)
画像自体を変えたりしたい場合は、
JsやJQueryなどなどを駆使したり、
そもそもhtmlの入力で

<img 
onmouseover="this.src='マウスオーバー画像URL'" 
onmouseout="this.src='元画像URL'" 
alt="" 
src="元画像URL" />

を使うとマウスオーバーできちゃったりします。

けど、タブレットやスマホでタッチすると
画像が消えっぱなしになったりと
なんかいまいちなので、JsやJQueryもしくは
今回の方法でやっちゃいましょう!