Bu derste , css ile bir şey farklı deneyeceğiz .
     Resimlerin opacity değerlerini değiştirerek çok hoş bir rollover efekti yapacağız. Bunu menü öğelerinizde  , resim albümlerinizde ve daha bir çok alanda uygulayabilirsiniz.

     Çalışmamızın son hali aşağıdaki gibi olacak.
 

(Eğer çok eski sürümde bir browser kullanmıyorsanız sonucu görebilirsiniz.- Internet Explorer 7′den önceki sürümler CSS ile ilgili tüm özellikleri desteklemiyor buna dikkat etmeniz gerekiyor.)

 Örneğe kullanacağınız resimleri hazırlamakla başlayabilirsiniz. Bir web tasarim editörünü (dreamweaver, frontpage, not-defteri) açın. İlk olarak aşağıda yer alan css stil kodlarını ekleyin.

[code]

<style type="text/css">

.opacityit img{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);

-moz-opacity: 0.4;

}

.opacityit:hover img{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

-moz-opacity: 1;

}

</style>[/code]

 Şimdi  resimleri bir düzen içinde tutması amacıyla bir div tagı ekleyin.

 Sonra her resim için rollover stilini çağıran  "opacityit" isimli sınıfı ve bir de link ekleyin.Çünkü Rollover efektimiz resmin  mouseover özelliğinde çalışacak.

[code]<div >
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="2.png" width="51" height="50" border="0" /> </a>
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="3.png" width="51" height="50" border="0" /></a>
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="4.png" width="49" height="50" border="0" /> </a>
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="5.png" width="50" height="50" border="0" /> </a>
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="6.png" width="50" height="51" border="0" /> </a>
<a href="http://www.bilgisayarcafe.com/" class="opacityit"><img src="7.png" width="49" height="50" border="0" /> </a>
</div>[/code]
 

Örneği İndir