Birçok blog’da sanıyorum ki, yazılara ait resimlerin soluk olduğunuve bu resimlerin üzerine geldiğiniz zaman resimlerin eski renginegeldiğ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örsellikbazı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ü
Yorumlarınızla Katkıda Bulunun
Hiç yorum yok
Yorum Gönder