Mecha versi 2.6.4 sudah dirilis!

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

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?

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.