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.
- JavaScript kullanma
- CSS kullanma
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:

- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MİTHRİL FRAMEWORK
- Laravel
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESİM ORTALAMA
- HTML RESME LİNK VERME
- HTML DİV ve SPAN NEDİR?
- HTML FORM OLUŞTURMA
- HTML RESİM EKLEME
- HTML KAYAN RESİM VE Marguee KULLANIMI
- CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
- HTML ARKAPLANA MÜZİK EKLEME
- CSS YATAY MENÜ YAPIMI