TOP

画像がふわーと薄くなる....消えはしません

 

記事内に置く画像にマウスオーバーすると画像が質量が少なくなり、ゆっくりと
透明化して行くというスタイルを読者のためのイメージアップにお使いになられては?

 

よく使われる同類の表現方法では、画像にリンクすると類似の透過効果を
発することもございますが、ここではリンクコードを入れ込まず、指定のみで完了します

 

お試し確認

 

マウスを当てると透過します

 

サイト内に置く画像をすべて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;
}

 

 

で、終わりです

 

 

 

 


 

追伸

 

ヘッダー画像でも同じ効果が得られるのではないかと試してみましたが、
なぜか変化なし、...でした

 

 

マウスを当てると画像がフェード、透過の変化を与える指定方法
トップページ