Nasıl Yapılır?

İlk olarak image adında bir div oluşturalım.


Bu divin style özelliklerini girelim width ve height değerini ben 600×400 yaptım.Background kısmına resim url giriniz, ve son olarakta transtion ile geçişleri biraz daha yavaşlatıyoruz.Hover kısmındada 100% olan resim boyutunu %130 yaparak büyütüyoruz.

.image{
width: 600px;
height: 400px;
background:url("http://lorempixel.com/600/400/");
background-size: 100% auto;
background-position: 50% 50%;
transition: background-size .2s;
}
.image:hover{
background-size: 130% auto;
}


Önizleme - Yazıya git