Daha önce hover kodunu burada anlatmıştım sizlere..Bu kod bildiğiniz kodlardan birisi..Fakat oldukça güzel bir kod diyebilirim :) Amacı bir resmin soluk hali ve üzerine geldiğinde parlak hali :)

Yani mause’la üzerine geldiğinizde parlaklaşması oluyor :) (Bu css kodlarınıda anlatması tam bi bela ya :)

Fakat CSS3 le birlikte bu kod kafaları karıştırmaya başladı..Hem internet explorer hemde diğer tarayıcılar tarafından desteklenen bu kod için iki özellik eklemek zorunda kaldık..

İnternet explorer’ın kullandığı filter:alpha(opacity= ) kodu yerine CSS3 te yani yeni nesil tarayıcıların desteklediklerinde bu kod opacity:0.4 olarak değişti..Allahtan birbirlerine çakışmıyorda her iki kodu kullanarak 2 browser da düzgün sonuçlar alabiliyoruz..

Fakat css3 de 1 tam sayı değeri üzerinden değerlendirirken eski ie kodunda 100 lük sistem üzerinden yapıyoruz..Yani %40 soluklaştıracağımız bir resmi filter:alpha da 40 değeri verirken css3 opacity kodunda 0.4 vermemiz gerekiyor.

  /* ie için gerekli kod */
  filter:alpha(opacity=60);
  /* CSS-3 standart kodu */
  opacity:0.6;

Şeklinde soluklaştırmak istediğimiz bir grafiğin css koduna ekliyoruz..

Özellikle wordpress temalarda blogroll bölümünde resim kullananlar bu özelliği kullanıyorlar :) Öyle bir özellik kullanmak veya temanızın farklı bir yerine birşeyler eklemek için kullanımı;

<img src="resimadresi.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Şeklinde kullanabilirsiniz..Resminiz %40 soluk halde olup üzerine geldiğinde orjinal rengine dönecektir..

Veya css alt yapısında hover kodu yerine opacity değerini 100 yapıp normal css şablonunda 40 kullanabilirsiniz..

Link filan eklemeyi de zaten siz yaparsınız :) Bende bu kodu karıştırdığımdan dolayı sizle paylaşmak istedim :)