画像がふわーと薄くなる....消えはしません
記事内に置く画像にマウスオーバーすると画像が質量が少なくなり、ゆっくりと
透明化して行くというスタイルを読者のためのイメージアップにお使いになられては？
よく使われる同類の表現方法では、画像にリンクすると類似の透過効果を
発することもございますが、ここではリンクコードを入れ込まず、指定のみで完了します
お試し確認
マウスを当てると透過します
サイト内に置く画像をすべてCSS指定で透過するということではありません
可変する指定は、記事内に置く、可変指定したい画像だけをHTMLでマークアップ
複数選択可
スタイルシートでは、いつどのページで複数のマークアップが追加されても作動するよう
一度きりのCSS追加をします
画像は、記事内配置します
カテゴリー、エントリーいくつも追加可能
画像コードの書き換え手順
通常シリウスで記事に呼び込む画像コードを書き換えるのですが、<% pageDepth %>
は、外さないで下さい
他のスクリプトの場合、<% pageDepth %>は、はずして img/1sir7699.pngだけでも反映されるのですが
プレビューでは、画像の確認はできるものの、アップすると画像が読み込まれないという
シリウス事情があるようです
通常の画像コード
<img src="<% pageDepth %>img/1sir7699.png" style="width:320px;height:250px;" alt="" />
書き換え例
<a href="#"><img src="<% pageDepth %>img/1sir7699.png" alt="" width="300" height="100" /></a>
スタイルシートに書き足す記述
数値を変えると透過スピードが速く、遅くを指定できます
後々、忘れないようわかりやすいところに張り付くて下さい
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
で、終わりです
追伸
ヘッダー画像でも同じ効果が得られるのではないかと試してみましたが、
なぜか変化なし、...でした