Bu özellikle istediğiniz bir resime yarı oranda veya daha farklı oranlarda saydamlık verebilirsiniz özellikle menülerde çok güzel görüntüye sahip olucaktır.
aşağıdaki özelliklere göre resim normalde ilk bakışta saydam özelliğe sahiptir mouse üzerine geldiğinde normal resim görünecektir. Isterseniz özellikleri çevirip önce normal mouse ile üzerine gelindikten sonra saydam görünüme sahip olabilir bunun için hover bölümündeki
opacity i 0.5 img bölümündekinide 1 yapmanız gerekmektedir. 0.5 lik olan bölümü ne kadar düşürürseniz yani 0.4 0.3 0.2 gibi yaparsanız resim o kadar saydam ne kadar yükseltirsenizde o kadar normal görüntüye sahip olucaktır.
<html>
<head>
<title>Html sayfası içinde css3 opacity(resimlerde saydamlık) kullanımı - LitmuS</title>
<style type="text/css">
body{
background-color:#a3a3a3;
}
img {
opacity:0.5;
}
img:hover {
opacity:1;
}
</style>
</head>
<body>
<img src="https://www.r10.net/images/misc/vbulletin3_logo_white.gif" width="300" height="200" />
</body>
</html>