Jejak Sliding Up Image Description Kamis, 21 Februari 2013
Tabel Konten HTML CSS 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
Taufik Nurrohman
⇒ /2012/10/auto-hide-search-form-inside-header.html?showComment=1362491980039#c2434000627795299994
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....