CSS Opacity (Saydamlık) ve Hover Kodu

Css opacity kodu ile bir tabloyu resmi veya bir menü elemanını Css hover ve opacity özellikleri ile saydamlaştırabiliriz veya üzerine gelince değiştirebiliriz. Hemen aşağıda örnek bir kod vermek istiyorum. İmg yazan yerdeki etiketi değiştirerek başka nesnelerinize de saydamlık verebilirsiniz. Daha detaylı anlatımı Ozicab Design Css Anlatımları #3 konusunda anlatacağım.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Üzerine Gelince Solan Resim Css Hover Opacity Kodu Ön izlemesi



Kod:

<a href='http://ocabbaroglu.blogspot.com/' target='_self'><img alt='' body='' border='0' onmouseout='this.style.opacity=1;this.filters.alpha.opacity=100' onmouseover='this.style.opacity=0.4;this.filters.alpha.opacity=0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDlFyAMaETVT3Ovf8S0keU0de8boKF1ku59pZKDEm8eml4YPJsUppI26iRp04EunHO_OxuzhP-MxkfG_geG_MkkgZbjENHOMlImvPgbKFyeFg3KUP2hLYM_WugFEZhZsAXivojyaqnow/s1600/haziranlogoocab.png' style='opacity: 1; '/></a>

Üzerine Gelince Renklenen Resim Css Hover Opacity Kodu Ön izlemesi



Kod:

<a href="http://ocabbaroglu.blogspot.com" target="_self"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDlFyAMaETVT3Ovf8S0keU0de8boKF1ku59pZKDEm8eml4YPJsUppI26iRp04EunHO_OxuzhP-MxkfG_geG_MkkgZbjENHOMlImvPgbKFyeFg3KUP2hLYM_WugFEZhZsAXivojyaqnow/s1600/haziranlogoocab.png" 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" body="" alt="" /></a>