Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

12 Oktober 2013

Kotak cs3 dengan efek slide up hover

Demo:



Tajuk
Penerangan disini


Snapshot:

1.Login ke akaun blogger anda.
2.Pastekan kod html ini di ruangan pos atau HTML/Javascript di layout

<style>
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}

.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px Georgia, Serif;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}

.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Db4qLaE_nwznXgjxFk3kzEW-Nc95qLqHLszP3LPT7rF8Y_uguz8q95Gqx2PzM-s52k4GY6Npm4TeWxc3xAJqVr8-6op8JJCOj_29Ep7p1q9rfTqXSeTt3rxdXT_7ScSDYUPsNWjxLWdf/s1600/index.jpg) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoDB6WlgHbu_T0-xQcgoP1UjpEs1aDOelKuemRQNAKf6xLpA9-MCS38ebWfF9rurRh9vYY1me8FhZeXGnB2gHNxiqT4x5Cb-Rg70ZYj7I0msOc1eZ9vfRaWWX5-Z8v1H-4hoTCAb1r4eI8/s1600/blog.png) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ecdLrg7-dO2gJD0UuqotAPBeiNk66NQFPg-Y6fw3eRWEn5kgdYY6cV2wEptVYyhspZ4RxEbTPu0yy3Y6SP0dMo-xWQU4Ps9akSR5f7nVcU03RYJnqusHjiuQW8ri6X6PDQCHm-JH4KCU/s1600/f.png) 14px 16px no-repeat; padding-left: 133px; }
</style>

<section class="slide-up-boxes">
<a href="#">
<h5>Tajuk 1</h5>
<div>Penerangan disini</div>
</a>

<a href="#">
<h5>Tajuk 2</h5>
<div>Penerangan disini</div>
</a>

<a href="#">
<h5>Tajuk 3</h5>
<div>Penerangan disini</div>
</a>
</section>

Post a Comment:

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)