Üzerine Gelince Büyüyen Resimler

Üzerine Gelince Büyüyen Resimler

sola ok  Kaldırılan İçerikler

13.12.2015

3,625 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...

Amazing Slider Yazısını Kaldırma
21.11.2015
3,923 Gösterim

Amazing Slider Yazısını Kaldırma

3 boyutlu slider uygulaması Amazing Slider'ın ücretsiz versiyonunda, slider'ın üzerinde bulunan "Amazing Slider" yazısı kaldırılamıyor. Bu konuda yazının nasıl kaldırabileceğini öğrenebilirsiniz.

Php ile Şifreli Sayfa Yapımı
28.01.2016
2,812 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.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,794 Gösterim

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme

Kaynak belirtilmeden kopyalanan yazılara otomatik kaynak adresi eklemek için küçük bir javascript kod blogunun siteye eklenmesi yeterli olacaktır.

Üzerine Gelince Büyüyen Resimler
13.12.2015
3,625 Gösterim

Üzerine Gelince Büyüyen Resimler

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

jQuery - Değişen Arka Plan Kodu
21.11.2015
2,912 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.

X

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

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