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
Bir yorum yap yada bir soru sor.

avatar
4 Yorum konuları
3 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
6 Yorum yazarları
Murat Dinçottoman turkMuhammedEralp AkyazıNurettin Kaya Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
Furkan Yurdakul
Furkan Yurdakul

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

Nurettin Kaya
Nurettin Kaya

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

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

Eralp Akyazı
Eralp Akyazı

Hocam bu resme nasıl link verebiliriz.

Nurettin Kaya
Nurettin Kaya

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

Muhammed
Muhammed

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

ottoman turk
ottoman turk

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