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

10Okunma
1 Yorum

Image 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 : 

<style>
* {
  margin:0;
  padding:0;
}

body {background-color:#f5f5f5}

.image-box-wrapper {
  width:642px;
  margin:50px auto;
}

.image-box {
  width:210px;
  height:160px;
  overflow:hidden;
  background-color:white;
  border:1px solid #ccc;
  float:left;
  margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}

.image-container,
.image-details {
  height:150px;
  border:5px solid white;
  background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}

.image-container img {
  width:200px;
  height:150px;
  padding:0 0;
  margin:0 0;
  border:none;
  outline:none;
  max-width:none;
  max-height:none;
  background-color:black;
}

.image-details h4,
.image-details p {
  margin:0 0 .2em;
  padding:0 0;
  height:70px;
}

.image-details h4 {
  font-size:120%;
  height:auto;
}

.image-details .details {
  padding:10px 12px;
  overflow:hidden;
}

.image-details .more {
  color:white;
  text-decoration:none;
  display:block;
  text-align:center;
  font-weight:bold;
  background-color:#f9a;
  height:26px;
  line-height:26px;
  margin:10px 0 0;
}

.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

 

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

Html : 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

Image
 

 

 

Lorem Ipsum

 

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

 

More

 

 

 

 

 

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-11 tarihinde yayınlandı,Toplam 2348 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
Ricky Aldiyansyah Yorumcu LV.1
2014-03-31 20:45:03 回 Yanıtla

thanks for share…,good css