Üzerine Gelince Büyüyen Resimler

Üzerine Gelince Büyüyen Resimler

sola ok  Tasarım

13.12.2015

1132 Gösterim

TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı
TSK Mehmetçik Vakfı

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





13.12.2015

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