CSS3 İle Resim Üzerine Gelince Büyütme

[#Cream]

Merhaba arkadaşlar, bugün sizlere CSS3 İle Resim Üzerine Gelince Büyütme'yi göstereceğim. Bir nevi üzerine gelince istediği yere zum yapıyor.

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

PHP Kod: Tümünü Seç Tümünü Kopyala

<div class="image"></div> 


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.

PHP Kod: Tümünü Seç Tümünü Kopyala

.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;
}