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 class="codexresim">

</div>

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.

.codexresim {
width: 140px;
height: 50px;
background: url(https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png);
}

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.

.codexresim:hover {
width: 200px;
height: 63px;
background: url(https://www.muratdinc.com/img-siteici/logo.png);
}

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.

<style>
.codexresim {
width: 140px;
height: 50px;
background: url(https://codex.dincmedya.com.tr/img/site-ici/codex-logo-yesil.png);
}
.codexresim:hover {
width: 200px;
height: 63px;
background: url(https://www.muratdinc.com/img-siteici/logo.png);
}
</style>

<div class="codexresim">

</div>

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

8 Yorum

  1. Cevap yaz

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

    • Cevap yaz

      İsterseniz
      <div class="codexresim">
      </div>

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

  2. Cevap yaz

    Hocam bu resme nasıl link verebiliriz.

    • Cevap yaz

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

  3. Cevap yaz

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

  4. Cevap yaz

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

    • 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. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>