Image box wrapper – yukarı doğru çıkan açıklama kutusu

By

SlidingUp
Google Chrome için hazırlanmış olan eklenti sayfasını bilmeyenler varmıdır bilmiyorum bilmiyorsanız buradan Chrome eklentilerine bakabilirsiniz.Eklentiler sayfasında  Chrome tarayıcısına eklemek istediğiniz eklentinin resminin üstüne geldiğiniz  an yukarı  doğru  eklenti  açıklamaları slayt  bir şekilde kayıyor. Bu şekilde  hem sayfadan tasarruf  etmiş  olursunuz hemde  websitenize  ayrı  bir görsellik kazandırmış olursunuz.

Taufik Nurrohman tarafından hazırlanmış  bu demo  örneğide  Chrome  eklentiler  sayfasından esinlenerek  hazırlanmış bir Css3 örneği.  Çalışma  şekli aynı Chrome ile arasındaki tek fark orada tarayıcıya ekle  diyor burada  devamı  diyor.  Mouse resmin üzerine geldiğinde açıklama kutusu çıkıyor.

 

 Kullanım

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

Css : 


 

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

Html : 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

Food

 

 

 

Lorem Ipsum

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy…

 

More

 

 

 

 

 

 



1 Comment
  1. Ricky Aldiyansyah 7 years ago
    Reply

    thanks for share…,good css

Leave a Comment

Your email address will not be published.

You may also like

Trend