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/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/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/AVvXsEhbtQgy7AOzXWKkdeq3ilhcprOYMWYTNRyvBs-fjQynBiUttXSqlM-U3rojZvGiiGvlBD_gZg-HAE779Zch25xF21omOfQNhDB0nnhBdKoF2b48eV-j8nXLtFiLZzvPvmaQ66W7KiBcVHQ/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>
CSS Opacity (Saydamlık) ve Hover Kodu CSS Opacity (Saydamlık) ve Hover Kodu Reviewed by Oğuzhan Cabbaroğlu on 7/05/2012 Rating: 5

9 yorum

  1. Oğuzhan şunun gibi nasıl yapabiliriz ;
    http://muujdatsayar.blogspot.com/
    Paylaşımların resimleri ve logo üzerine gelince biraz değişme oluyor.

    YanıtlaSil
  2. .post img, table.tr-caption-container {
    padding:4px;
    border:1px solid #cccccc;
    opacity:1.0;
    }
    img:hover
    {
    opacity:0.8;
    }

    kodlarını sitene ekle ama değişebilr temaya göre etiketlere bi bak

    YanıtlaSil
  3. Ozi nedeyim artık :) hairkasın

    YanıtlaSil
  4. Tamamdır kardeşim oldu sağolasın.

    YanıtlaSil
  5. kardeşim videoozideki gibi katogori nasıl yapılır simdiden Allah razı olsun...

    YanıtlaSil
  6. Üstüne gelince bide Küçük bir açıklama çıkıyo onu nasıl yapıcaz ?

    YanıtlaSil

Facebook

Image Link [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwUtKFfbxaHle-k0i-w6fmNwkMeKC4nkTFQX6cR63AuSKhbPGt9LSnu0aTDQAfCbQrKy-1GTldHk8WUA2jtUWSwvklex0Itj1HfLC9YzQmkD7IlN-sGSwHt0vnOXwpuKLSutolIDG8hI/w1366-h768-rw-no/] Author Name [Oğuzhan Cabbaroğlu] Author Description [Ozicab İnternet ve Tasarım Hizmetleri - Kurucu / Nam-ı Diğer Ozicab ] Facebook Username [ozicab] Twitter Username [ocabbaroglu] GPlus Username [107441494120937470968] Pinterest Username [ozicab] Instagram Username [ozicab]