マウスオーバーで文字をぼかす

質問

http://momovip656.blog33.fc2.com/
このブログの記事タイトルをマウスオーバーすると、タイトルがぼけます。

マネしたいのですが、やり方がわかりません。

どなたか方法を知っている方や、何か関連することを知っている方はいませんか？

回答No.2

t_ohta · ベストアンサー

a:hover {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 20px #2220de, 0 0 20px #CFF, 0 0 20px #CFF, 0 0 20px #CFF, 0 0 20px #CFF;
}
で影を付けてますね。

お礼

ありがとうございます。
まさにそれです。

検索したら他にも色々なパターンがあるみたいです。
http://www.css-lecture.com/log/css3/css3-text-shadow-box-shadow.html

回答No.1

weakweak

cssでa:hoverを指定すれば、a要素にカーソルが当たった時限定のスタイルを指定できます。今回の場合はおそらく二枚画像を重ねて、カーソルが当たった時に上の画像が隠れることでタイトル画像をにじませたように見せているんだと思います。

具体的にはタイトルをdiv要素などで囲い、cssで背景画像としてカーソルが当たった時の画像(今回の場合はぼやけた画像)を指定します。
そしてカーソルが当たっていない時のタイトル画像をimg要素でhtmlに配置し、cssでa:hover(カーソルがタイトルに当たった時)のスタイルとして、visibility:hiddenを指定し、カーソルが当たった際はhtmlに指定した滲んでいない画像が消えるようにします。

ざっと書いてしまいましたが、もし理解できなければさらに質問していただければと思います。面倒に書いてますが非常に簡単です。

補足

標準とボケたのと、二種類の記事タイトルを画像として作って、それらを重ねて表示し、標準の方をマウスオーバーで非表示にしているという意味でしょうか？

htmlソースを見るかぎり、記事タイトルはテキストで表示しているようですし、
記事更新のたびに画像を作るというのは、とても大変な気がします。

それに、文字コードを違うものに指定しても、文字化けした記事タイトルにマウスオーバーするとぼかした感じに変わります。

二種類の画像を用意しているというのは違うと思います。