Dentasarım
Popüler tasarımlar

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.

 

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=