Üzerine Gelince Büyüyen Resimler

Üzerine Gelince Büyüyen Resimler

sola ok  Kaldırılan İçerikler

13.12.2015

8,679 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...

HTML ve CSS ile Duyuru Panosu
11.05.2016
8,818 Gösterim

HTML ve CSS ile Duyuru Panosu

Sahibi olduğunuz web sitesine html ve css ile duyuru panosu ekleyin. HTML duyuru panosu kodları.

PHP ve jQuery ile Anında Önizlemeli Arama Formu
20.06.2016
4,907 Gösterim

PHP ve jQuery ile Anında Önizlemeli Arama Formu

Her webmaster, sahibi olduğu siteye, Google gibi anında önizlemeli site içi arama motoru eklemek ister. Bunu PHP, jQuery kullanarak yapmak mümkündür.

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama
09.07.2016
13,007 Gösterim

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama

Php ile tamamen yasal olarak tc kimlik numarası, isim, soyisim, doğum tarihi doğrulama

Localhost .htaccess Ayarı
24.01.2016
5,145 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.

Amazing Slider Yazısını Kaldırma
21.11.2015
6,697 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.