Jimdoのサイト制作でリンクや拡大表示の設定のある画像にマウスカーソルをのせた際、エフェクトをつける必要があったのでCSSを制作しました。

便利なコードですので早速本サイトにも設置。マウスカーソルが画像の上にのった場合、画像の「透明度」が変更されます。
簡単に設定できるソースですので、設置方法を紹介。ご活用ください。
現時点でIE6～9、Firefox、Google Chrome、Safariで動作確認をしております。

Jimdoにログイン後、管理メニュー（右側に表示されるアイコン一覧）から「設定（歯車のアイコン）」をクリック後、メニューから「ヘッダー部分を編集」をクリックし、下記ソースを貼り付けてください。

コピペする際は、コピー後一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます（以下コードです）

Jimdoにログイン後、管理メニュー（右側に表示されるアイコン一覧）から「設定（歯車のアイコン）」をクリック後、メニューから「レイアウト」をクリックし、「独自レイアウト」内「CSS」に下記ソースを貼り付けてください。

コピペする際は、コピー後一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます（以下コードです）

コードを設置すると、Jimdoページ内のリンク及び拡大表示を設定してある画像にマウスカーソルをあわせた際、画像の透明度が変更されます。

数字の「70」や「0.7」部分が透明度の数値です。

数値が小さいほど、画像が透明になります。お使いのサイトにあわせて調整してください。

ブラウザによってソースが異なりますので、上記ソースを全て記載してください（環境によっては、上記ソースを全て記載しても動作しない場合があります）。

本コードを設置する際、画像の「幅（width）」を設定しないと動作しない場合があるのですが、Jimdoは画像を設置するだけで自動的にwidthが設定されるので、幅の設定を行わなくても動作します。

CSS3リファレンス「opacity」|HTMLクイックリファレンス
画像の透明度を変化させる：CSS小技|ブログが作りたい！
デザインに使えるちょっとしたCSSのスニペットいろいろ|Webデザインレシピ

参考サイトについては、もっと沢山調べたのですが、一番困ったのが「（特にブラウザ毎の設定について）サイト毎に記載してある内容が違う（AサイトとBサイトで内容が逆、等）」という事。
上記サイトは、その中でも非常にきちんとまとめてあり、大変参考になりました。

今回の記載については、特に最後の参考サイトをベースに用意しました。ありがとうございます。