Flip-Images Halkalı

1
369
Görüntülenme

flip resim
Css3 geçişler ve dönüşümler ile hazırlanmış bir galeri örneği. Bu galeri örneği ile çok güzel 3D dödnürme animasyonuna sahip resim galeriler oluşturabilirsiniz. İki tabakadan oluşan Css çerçevelerin birinci tabakasında resimler ikinci tabakasında ise resim açıklamaları halkali bayan eskort bulunuyor mouse ile resmin üzerine geldiğinizde ise çerçeve 180 derece dönüyor ve resmin açıklaması görünüyor. Mouseyi geri çektiğinizde ise aynı işlem tam tersine çalışıyor bu sefer ve çerçeve tekrar 180 derece dönüp resimler görünüyor.

Aslında ilk başta  sadece   bir çevirme efekti hazırladım sağdan  soldan topladığım kodlar  ile. Böyle bir  efekt için  en kullanışlı olabilecek bölüm resim galeri bölümü olur diye  ufak bir resim galerisi  hazırladım. Biraz  daha uğraşıp arka tarafta  bulunan resim açıklamalarınada tıklanabilir  bir  buton eklemek  istedim ama o  kadar boş zamanı olan birisi değilim. Eh artık  onuda  siz  yaparsınız.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css dosya adresi : 

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Demo örneğinde  8 adet resim bulunuyor  yazı fazla uzamasın diye buraya sadece iki resmin kodunu ekliyorum. Kopyala yapıştır yaparak çoğaltabilirsiniz.

 

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikImage box wrapper
Sonraki İçerikSlayt Halkalı akordeon
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

1 Yorum

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.