Css ile üzerine gelince değişen resim yapma

Bu yazımızda size img etiketi kullanmadan üzerine gelince değişen resim elde etmeyi göstereceğiz.

İlk önce bir div sınıfı atayalım. Örneğin ben resmi codexresim adlı bir css sınıfına atayacağım.

Div kodlarımız hazır. Şimdi css kodlarımızı ayarlamamız gerekiyor. Css sınıfımızı (class) aşağıdaki şekilde tanımlıyoruz. Resim olarak codex logomuzu kullanacağız.

Yukarıdaki kodda css sınıfımızı div’e tanıttık ve resmin genişlik ve yükseklik değerlerini verdik. Genişlik ve yüksek değerleri resim ile aynı olmalı. Şimdi üzerine gelince hangi resmin değişmesi için gereken css kodlarını verelim.

Yukarıdaki kodda resmin üzerine gelince hangi resmin gözükeceğini ayarladık ve resmin kendi genişlik ve yükseklik değerini girdik. Şimdi kodlarımızın çalışabilirliğini test etmek için bir araya toplayalım. Css kodlarımızı <style> etiketi arasına koyacağız.

Yukarıdaki kodların ön izlemesi aşağıdaki gibidir. Kodumuz çalışıyor, güle güle kullanın.

8 Yorum

  1. Furkan Yurdakul - 1 Kasım 2013, 21:57 Cevap yaz

    aslında kullanmışsın img etiketi ama css ile kullanmışsın :) bizi kandırıyo :D

    • Nurettin Kaya - 5 Kasım 2013, 18:45 Cevap yaz

      İsterseniz
      <div class="codexresim"></div>
      kodları yerine
      <img class="codexresim" />
      kodunu da kullanabilirsiniz.

  2. Resimlere ve Yazılara Css İle Saydamlık Vermek | Codex Murat Dinç - 30 Kasım 2013, 12:15 Cevap yaz

    […] kullanarak üzerine gelince resmin solmasını sağlayabilirsiniz. Bunun için opacity kodunu şu yazımızda verdiğimiz yöntemi uygulayarak […]

  3. Eralp Akyazı - 5 Nisan 2014, 15:17 Cevap yaz

    Hocam bu resme nasıl link verebiliriz.

    • Nurettin Kaya - 8 Nisan 2014, 20:49 Cevap yaz

      <a href=”link buraya gelecek” rel=”nofollow”> resim kodu buraya </a>

  4. Muhammed - 22 Ekim 2014, 00:49 Cevap yaz

    Çok teşekkür ederim hocam işime yaradı

  5. ottoman turk - 23 Nisan 2016, 11:03 Cevap yaz

    konu benim işime yaramadı ama codex sitesine destek için tüm reklamlara tıklama yaptım :)

    • Murat Dinç - 26 Nisan 2016, 04:59 Cevap yaz

      Umarım bir sonraki ziyaretinizde sizde konulardan faydalanırsınız ve konu işinize yarar. İnce davranışınız içinde ayrıca teşekkürler :)

Bir Cevap Bırakın

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*