Merhaba arkadaşlar bu gün size bu güzel kodlardan bahsedeceğim. Benim hoşuma gitti umarım sizinde hoşunuza gider. Kısaca bahsetmek istersek , fare ile resimin üzerine gelince resimin büyümesi diyebiliriz. Ne işe yarar diyecek olursanız güzel görünmesinden başka bir işe yaramadığını söyleyebilirim.

Mantık ?

Olayın mantığı aslında çok basit. Belli ölçülerde bir alan oluşturuyoruz ve bu alana belli bir arka plan veriyoruz. Daha sonra hover kodları ile sadece arka plana zoom yapıyoruz. Bu sayede kutunun boyutu değişmiyor sadece arka plan yakınlaşıyor.

Kodlar Konuşsun

İlk olarak belli boyutlardaki kutuyu Html kodları ile çağırıyoruz.



Küçük bir kod yazdıktan sonra sıra asıl kısım Css’e geliyor. Css’de sırasıyla kutunun boyutlarını ,arka planını ve arka plan ayarlarını yapıyoruz.

.kutu{
width: 480px;
height: 260px;
background:url("http://www.berkeguler.com/wp-content/uploads/2014/08/blogger-karikatc3bcr1-300x128.jpg");
background-position: 50% 50%;
transition: background-size .2s;
background-size: 100% auto;
}

Son olarak da arka plandaki resmi fare üzerine gelince büyütüyoruz büyütüyoruz.

.kutu:hover{background-size: 150% auto;}


Sonuç: http://jsfiddle.net/berkegulercom/6oxf6oyx/

Kaynak: Berke Güler