CSS İle Resimlerin Üzerine Gelince Büyütme

Web sayfalarınıza özel efektler eklemenin birçok yolu vardır ve bunlardan biri, kullanıcı mouse ile üzerine geldiğinde Resimleri Büyütme Efekti eklemektir. CSS3 geçişlerini kullanarak Resimleri büyütme efekti oluşturursunuz. Bu, bir Resmi Büyütebileceğiniz veya Küçültebileceğiniz anlamına gelir.

Mouse ile üzerine gelme efekti oluşturmanın iki olası yolu vardır.

Bu yazıda, CSS kullanarak bir Resmin üzerine gelindiğinde nasıl yakınlaştırılacağını göreceğiz. Bu makale iki kod bölümü içerir. İlk bölüm HTML kodunu ve ikinci bölüm CSS kodunu içerir.

HTML Kodu: Bu bölümde, hover efektinde Resim Büyütmenin temel bir yapısını oluşturmak için HTML kullanacağız.

 
 <img src="saksı.png"/> 	
 
 

CSS Kodu: Bu bölümde, mouse ile üzerine gelindiğinde Resmi Yakınlaştırmak için bazı CSS özelliklerini kullanacağız. Bir yakınlaştırma efekti oluşturmak için transform (geçiş ve dönüştürme) özelliğini kullanacağız.

 
 img:hover {
 -ms-transform: scale(1.3); /* IE 9 */
 -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3); 
}
 
 

ÇIKTI:





Zehra 08/03/2021

Hocam ben belirttiğiniz kodu girdim de. Bu sefer açılmasını istemediğim resimler de üzerine gelince büyüyor mesela logo gibi.

yönetici 09/03/2021

Zehra, Css ile img etiketi seçtiğimiz için tüm resimlerde çalışır, Tek resim için class ataman gerekir.

<img class="test" src="saksı.png"/>	

CSS:

.test:hover {
 -ms-transform: scale(1.3); /* IE 9 */
 -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3); 
}

Erdal 15/04/2021

Selamlar. CSS kodunda en baştaki nokta çıkmamış, o nedenle kod çalışmıyor.

yönetici 17/04/2021

Teşekkürler, düzetildi.

Noob Web 10/10/2021

Hocam css dosyasi disinda nerede yazabilirim bu css kodlarini???

yönetici 14/10/2021

HTML sayafasında style etiketleri içinde yazabilirsin.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

2635

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.