Birçok blog'da sanıyorum ki, yazılara ait resimlerin soluk olduğunu ve bu resimlerin üzerine geldiğiniz zaman resimlerin eski rengine geldiğini görmüşsünüzdür. Örnek olarak; yazılarınıza eklediğiniz resimleri soluklaştırarak, çok güzel görünümler elde edebilirsiniz. Elbette, yazınızdaki resimlerin üzerine gelindiği zaman resimler eski rengine geri gelecektir. Fakat farklı bir görünüm elde edildiği için, bu uygulamanın çok iyi olduğunu düşünüyorum. En azından görsellik bazında değerlendirecek olur isek; hem kullanımı basit, hem de güzel bir görünüm elde ediliyor. Kullanımı da oldukça basit. Hemen uygulamaya geçelim isterseniz.

İlk olarak temamızdaki aşağıdaki kodu bulalım;

</head>

Sonra ise aşağıdaki kodları yukarıdaki koddan önce ekleyelim;

<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Hepsi bu kadar. Şimdi ise, bu uygulamayı nasıl resimlere yansıtırız? bunu öğrenelim.

Yazınıza resim ekler iken aşağıdaki kodu kullanmanız yeterli olacaktır. Aşağıdaki kodu kullanmak haricinde, herhangi bir ek ayarlamaya gerek kalmayacaktır.

<a class="linkopacity" href="resimlinki" target="_blank" alt="resimaciklamasi">
<img src="resim" />
</a>

Not: Yukarıdaki kodlarda yer alan kırmızı renkli kısımları kendinize göre değiştirmeyi unutmayınız.

Örnek Görüntü