Sliding Up Image Description
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}
14 Comments:
Keren, Mas! \o/
Mas mau tanya, :yaya: cara membuat header kaya DTE :] bagaimana membuat :] mempunyai efek hover? terimakasih \o/
hmm... pake @keyframe kayaknya, tapi saya gak tahu kodenya :D
keren keren :D :\
bisakah kalau ini diterapkan untuk desain posting di homepage?
Bang Tau mau tnaya ini kode html dan cssnya diletakkan dimana yah di edit html saya kurang paham
⇒ /2012/10/auto-hide-search-form-inside-header.html?showComment=1362491980039#c2434000627795299994
wah mas, jadi mesti di edit satu satu yah mas postingannya? "more" nya di "a href" kan ke postingan yg udah di posting ya?
gan ni ane mau nnya, gimana cara ya buat pembatas posting di blog...
mohon bantuan ya gan....
:-bd
This comment has been removed by the author.
pakai CSS border aja bro di main-wrappernya atau apapun itu..
Pasti bisa kok, itu kan tutor kelas mendasar/pemula :)
Semoga berhasil :D
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 :)
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
:) :) :)
assalamualaikum sebelumnya saya minta izin sama admin...
mas saya mau nanya gimana carabuat navbar kaya DT Web mohon pencerahannya mas....
Post a Comment
<< Home