Mouse ile üzerine gelince değişen resim | HTML + CSS

Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler.
Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz.
Hemen kodları deneyelim.Masaüstünüze
index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim.

<html>
<style>
#degisenresim {
    height: 70px;
    width: 120px;
    background-image: url('resim1.jpg');
}

#degisenresim:hover {
    background-image: url('resim2.jpg');
}
</style>
<img id="Library">
</html>

Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar mouse kaldırdığınızda resim1.jpg görünecektir.Umarım faydalı olmuştur.İyi çalışmalar.





Hiç yorum yok