Merhaba arkadaşlar sitelerinize daha dinamik bir görünüm kazandırmak ve sitenizin göze daha çok hitap etmesini istiyorsunuz aşağıdaki kodları sitenize uygulayabilirsiniz. Siteye oldukça hoş bir görünüm kazandırıyor. “Nasıl?” diye soracak olursanız sitenizde bulunan görsellerin üzerine fare ile gelince resimler büyüyor.
Kodların çalışma mantığı zaten oldukça basit. Belli ölçülerden bir kutu oluşturuyoruz ve bu kutuyu yüzde yüz dolduracak şekilde bir arka plan ekliyoruz. Daha sonrasında zaten hover kodlarımız devreye giriyor ve fare, görselin üzerine gelince kutu sabit şekilde kalırken üzerine geldiğimiz görselde bir yakınlaşma söz konusu oluyor. Dilerseniz şimdi de kodlara geçelim.
İlk olarak birazda CSS dosyamıza ekleyeceğimiz kodları çağırmak ve sitemiz üzerinde gözükmesini sağlamak için görsel nerede bulunacaksa aşağıdaki vereceğim kodu oraya ekliyoruz.
<div class="kutu"> </div>
Bu kod sayesinde birazdan CSS dosyamıza ekleyeceğimiz “kutu” başlıklı kodları çağırmış olacağız. Şimdi de Css dosyanızı açın ve en alt satıra inip aşağıdaki kodları ekleyin.
.kutu{ width: 660px; height: 330px; background:url("https://banadersanlat.com/images/css-hover-effect.jpg"); background-position: 50% 50%; transition: background-size .2s; background-size: 100% auto; }
Daha sonra yine CSS dosyanıza, yukarıda eklemiş olduğunuz kodların altına aşağıdaki kodu ekleyin. Aşağıdaki kod sayesinde büyüme işlemi gerçekleşmiş olacak.
.kutu:hover{background-size: 130% auto;}
Eğer bir hata yapmadıysanız işleminiz başarılı bir şekilde tamamlanmıştır. İkinci verdiğim kodda 2.satırdan resminizin genişliğini, 3. satırdan resminizin yüksekliğini ve 4. satırdan resminizin yolunu değiştirip kullanmaya başlayabilirsiniz. Üçüncü verdiğim hover kodunda bulunan 130% değerini arttırıp veya azaltarak değişik sonuçlar edebilirsiniz. Bu değeri 115% yaparsanız resimleriniz daha az büyüyecektir. Bunları sitenizin durumuna ve keyfinize göre düzenleyebilirsiniz. Umarım beğenirsiniz. İyi günlerde kullanın.