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.