Üzerine Gelince Büyüyen Resimler

Üzerine Gelince Büyüyen Resimler

sola ok  Kaldırılan İçerikler

13.12.2015

9,081 Gösterim

PDF KİTAP İNDİR / EPUB KİTAP İNDİR - TÜM KİTAPLARI ÜCRETSİZ İNDİRMEK İÇİN HEMEN TIKLA!
Bu içeriği 1 dakika okuyabilirsiniz.

Önerilen Video ▼



HTML/CSS ile Üzerine Gelince Büyüyen Resimler


Web sitenize mouse ile üzerine geldiğinizde büyüyen resimler ekleyebilirsiniz. İlk olarak HTML kodlarını yazıp daha sonra CSS kodlarıyla büyüme ve geçiş efektini sağlıyoruz.

HTML Kodları


4 adet görseli yanyana koyuyorum. İstenilen sayıda görsel kullanılabilir. Fakat görsellerin boyutları aynı olursa görsel bütünlük korunmuş olur. Her <img> etiketine resim-zoom classını atıyorum ve bu class'a CSS ile görsellik ekliyorum.

<img class="resim-zoom" src="resim1-zoom.jpg">
<img class="resim-zoom" src="resim2-zoom.jpg">
<img class="resim-zoom" src="resim3-zoom.jpg">
<img class="resim-zoom" src="resim4-zoom.jpg">


CSS Kodları


ilk olarak resim-zoom classını tanımlıyorum. Daha sonra resim-zoom classına sahip olan görsellerin üzerine gelindiğinde uygulanacak aksiyonu tanımlıyorum.

.resim-zoom{
position: relative;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
}

.resim-zoom:hover{
z-index:2;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}


Önizleme






Bu içeriği MasivaTurk.com sitesini kaynak göstererek kullanabilirsiniz. İçeriklerin; MasivaTurk.com sitesi kaynak gösterilmeden herhangi bir web sayfasında, sosyal medyada ve görsel basında yayınlanması yasaktır. Ayrıntılı bilgi için Kullanım Koşulları sayfasını okuyabilirsiniz.

13.12.2015

İçerik hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (6)

  1. burcusoykanli

    İnternet sayfaların da çok sık görüyorum bende kendi blogum da kullanıcam teşekkürler.

  2. Fatih

    Resmin üzerine tıklayınca bir mesaj kutusunun çıkmasını istiyorum bunu nasıl yapabilirim? Örnek vereyim resimde bir soru olsun resmin üzerine tıklayınca mesaj kutusunda Cevap C şıkkı desin bunu arıyorum bir bilginiz var ise cevaplar mısınız? teşekkürler.

  3. Ali Osman

    Ben sitemde duvar kağıdı paylaşımı yapıyorum bu özellik güzel duracaktır. Hafta içi boş bir vaktimde deneyeceğim.

  4. Zeki

    Herkes bu konuyu yarım yarım anlatmış, detaylarla kodlarla bilgilendirdiğiniz için teşekkürler.

  5. Gökhan

    Siteme ekledim kodları. Görsel açıdan mükemmel oldu. Teşekkür ederim.

  6. Hüseyin Meret

    Eskiden bu tür özellikleri kullanıyordum sitemde. Bazen üzerine gelince 360 derece dönen özelliği kullanıyordum, bazen de normal büyüyen özelliği.


Bu İçerikler de İlginizi Çekebilir...

jQuery - Değişen Arka Plan Kodu
21.11.2015
5,343 Gösterim

jQuery - Değişen Arka Plan Kodu

Web sitenizin arka plan görselinin belirli aralıklarla sizin belirlediğiniz görseller arasında değişmesi için gerekli olan javascript kodu.

Localhost .htaccess Ayarı
24.01.2016
5,352 Gösterim

Localhost .htaccess Ayarı

Php ile kodlama yaparken herkesin kullandığı .htaccess dosyası localhostta aktif değildir. Kodlama esnasında birçok sorunu önlemek için .htaccess dosyasını localhostta aktif etmek gerekmektedir.

+18 Uyarı Panosu Yapımı
21.06.2016
5,213 Gösterim

+18 Uyarı Panosu Yapımı

En basit haliyle, html, css ve javascript kullanarak +18 uyarı panosu yapımı, kodları

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı
29.01.2016
25,384 Gösterim

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı

Php SMTP Sınıfı olan PHPMailer ile mail gönderme anlatımı - PHP İletişim Formu yapımı - PHP SMTP İletişim Formu

CSS ile Scrollbar Ayarları
29.12.2015
5,828 Gösterim

CSS ile Scrollbar Ayarları

Web sitelerinde bulunan scrollbar(kaydırma çubuğu) görünümünü kişiselleştirmek için gereken kodlar.