Sliding Up Image Description

Tabel Konten
  1. HTML 
  2. CSS 
Sliding Up Image Description
Terinspirasi dari Google Web Store

HTML 

<div class="image-box-wrapper" id="image-box-wrapper">

    <!-- `.image-box` start -->
    <div class="image-box">
        <div class="image-container">
            <img src="img/image-1.jpg" alt="" width="200" height="150">
        </div>
        <div class="image-details">
            <div class="details">
                <h4>Description Title</h4>
                <p>Description text...</p>
                <p><a class="more" href="#">More</a></p>
            </div>
        </div>
    </div>
    <!-- `.image-box` end -->
    
    ...
    ...
    ...

    <div class="clear"></div>

</div>

CSS 

.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;
  -webkit-transition:margin-top .4s ease-out .4s;
  -moz-transition:margin-top .4s ease-out .4s;
  -ms-transition:margin-top .4s ease-out .4s;
  -o-transition:margin-top .4s ease-out .4s;
  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}

Lihat Demo

14 Komentar

  • MUX SPARROW

    Keren, Mas! \o/

  • Unknown

    Mas mau tanya, :yaya: cara membuat header kaya DTE :] bagaimana membuat :] mempunyai efek hover? terimakasih \o/

    • budkalon

      hmm... pake @keyframe kayaknya, tapi saya gak tahu kodenya :D

  • tes

    keren keren :D :\

  • Unknown

    bisakah kalau ini diterapkan untuk desain posting di homepage?

  • hanggarps

    Bang Tau mau tnaya ini kode html dan cssnya diletakkan dimana yah di edit html saya kurang paham

  • Unknown

    wah mas, jadi mesti di edit satu satu yah mas postingannya? "more" nya di "a href" kan ke postingan yg udah di posting ya?

    • Unknown

      bukan mas, kurang lebih Tutor ini hampir sama kok dengan tutor "Posting Auto Readmore Tanpa Java Script" coba aja perhatiin codenya mas pasti bisa kok :)

  • Unknown

    gan ni ane mau nnya, gimana cara ya buat pembatas posting di blog...
    mohon bantuan ya gan....
    :-bd

    • Unknown

      pakai CSS border aja bro di main-wrappernya atau apapun itu..
      Pasti bisa kok, itu kan tutor kelas mendasar/pemula :)
      Semoga berhasil :D

      • Unknown

        bukan gan maksud ane tu ...
        jumlah posting yang tertampil itu terlalu banyak ,padahal udah ane atur di "posting blog" gue atur jadi 5 ...
        jadi intinya kok pengaturannya itu tidak berfungsi ...

        contoh: http://predatorevil.blogspot.com/search/label/Trik%20And%20Tips%20Blogger

        :) :) :)

  • Unknown

    Komentar ini telah dihapus oleh pengarang.

  • Imron Fhatoni

    assalamualaikum sebelumnya saya minta izin sama admin...
    mas saya mau nanya gimana carabuat navbar kaya DT Web mohon pencerahannya mas....

Komentar telah ditutup.