Üzerine Gelince Büyüyen Resimler

Üzerine Gelince Büyüyen Resimler

sola ok  Kaldırılan İçerikler

13.12.2015

2,587 Gösterim

Bu içeriği 1 dakika okuyabilirsiniz.

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...

+18 Uyarı Panosu Yapımı
21.06.2016
1,943 Gösterim

+18 Uyarı Panosu Yapımı

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

Php ile Şifreli Sayfa Yapımı
28.01.2016
1,854 Gösterim

Php ile Şifreli Sayfa Yapımı

Php ile sahibi olunan bir web sitesinin herhangi bir sayfasına, basit bir şekilde şifre koymak mümkündür. Sayfaya giriş yapma izni bulunan, birden fazla kullanıcı adı ve kullanıcı şifresi tanımlanabilir.

CSS ile Scrollbar Ayarları
29.12.2015
1,477 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.

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı
29.01.2016
13,599 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

Üzerine Gelince Büyüyen Resimler
13.12.2015
2,587 Gösterim

Üzerine Gelince Büyüyen Resimler

Web siteleri için, mouse ile üzerine gelindiğinde büyüyen resim kodları

X

MasivaTurk.com içeriklerini
YouTube'dan takip edebilirsiniz.

YOUTUBE KANALIMA ÜCRETSİZ
ABONE OLMAK İÇİN TIKLA