DENTASARIM | Tasarımın bizden!
Üzerine gelince değişen resim yapmak
Merhaba arkadaşlar, bugün ki dersimizde üzerine gelince değişen resim yapmak. Buda çok basit videolu anlatıma gerek yok yani, dersimize geçelim isterseniz...İlk olarak div etikemizi açıyoruz
<div id="denresim">Resim gelicek</div>
Daha sonra css kodumuzu oluşturmaya başlıyoruz...#denresim {
background-image: url(https://img.webme.com/pic/d/dentasarim/denyenilogov1.png); /* Şimdi ki görünen resim.*/
background-repeat: no-repeat; /* Resmin kendini tekrar etmemesi için kullandığımız kod.*/
width: 500px; /* Genişlik verdik.*/
height: 50px; /* Yükseklik verdik. */
transition: 1s; /* Geçiş hızını ayarladık.*/
}
#denresim:hover {
background-image: url(https://img.webme.com/pic/d/dentasarim/dentasarimv2.png); /* Sonraki görünen resim.*/
background-repeat: no-repeat; /* Resmin kendini tekrar etmemesi için kullandığımız kod.*/
width: 500px; /* Genişlik verdik.*/
height: 50px; /* Yükseklik verdik. */
}
Kodlarımızı yazdık, kodumuzun ön izlemesi aşağıdadır.background-image: url(https://img.webme.com/pic/d/dentasarim/denyenilogov1.png); /* Şimdi ki görünen resim.*/
background-repeat: no-repeat; /* Resmin kendini tekrar etmemesi için kullandığımız kod.*/
width: 500px; /* Genişlik verdik.*/
height: 50px; /* Yükseklik verdik. */
transition: 1s; /* Geçiş hızını ayarladık.*/
}
#denresim:hover {
background-image: url(https://img.webme.com/pic/d/dentasarim/dentasarimv2.png); /* Sonraki görünen resim.*/
background-repeat: no-repeat; /* Resmin kendini tekrar etmemesi için kullandığımız kod.*/
width: 500px; /* Genişlik verdik.*/
height: 50px; /* Yükseklik verdik. */
}