Make Expand Hover Effect Area use jQuery or CSS only

Admin kurang mengerti juga untuk apaan http://conditionizr.com/ Penjelasan singkatnya begini Conditionizr Ketika memasuki web tersebut gue melihat terdapat satu area dengan gaya expand tepatnya di bagian bawah! Area expand diberi batas ketinggian, dengan efek hover yang elegan memperlihatkan daerah lain yg tersembunyi. Karena ketinggian sudah dibatasi, maka ketika di hover akan terlihat scroll yg mana pada bagian atas & bawah sudah diberi hiasan berupa gambar sederhana. Karena kesederhanaan inilah ternyata memberikan nilai plus unyu² :D

Expand area Conditionizr dibuat memakai trick jQuery plugin Jika sobat penggila jQuery silahkan perhatikan struktur berikut...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#ua .wrap_ua').hover(
     function() {
     $(this).stop().animate({height:"450px"}, 500).css({overflowY: 'scroll'});
    },
 function() {
     $(this).stop().animate({height:"250px"}, 500).css({overflowY: 'scroll'});
    }
);
});
</script>

CSS Code

#ua {
background: #FFF;
position: relative;
}
#ua p span {
color: #FF7361;
}
#ua .wrap_ua {
height: 250px;
overflow-y: scroll;
}
#ua .spacer {
display: block;
height: 45px;
}
#ua .ua-top {
background: url(fade-top.png) repeat-x;
height: 33px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
#ua .ua-bottom {
background: url(fade-bottom.png) repeat-x;
height: 33px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}

Gambar fade-top.png dan fade-bottom.png

     

Markup HTML<div id="ua">
<div class="ua-top"></div>
<div class="wrap_ua">
<p>YOUR CONTENT HERE</p>
<p>YOUR CONTENT HERE</p>
<p>YOUR CONTENT HERE</p>
<p class="spacer"></p>
</div>
<div class="ua-bottom"></div>
</div>

Itulah bumbu ramuan membuat expand area dengan mengikutsertakan jQuery script. Lantas bagaimana caranya membuat area expand hanya memakai CSS?

DEMO

Tutorial Blog for Stylish Blogger

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at.Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an.

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente.Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete.

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin.Den ménger Keppchen rëschten wa, dé gei Mier Eisen. Da vun esou hirem, jo Ronn Dauschen dem, aus Haus hinnen am. Stret d'Sonn d'Kàchen ass am. Fond schéi aus hu. Hier méngem op bei. Jo get zënter gesiess hannendrun, Himmel d'Stroos wat hu. Virun alles d'Leit oft op, da bessert d'Kamäiner Hämmelsbrot vun, d'Welt Hämmel Keppchen um rou.

To help make Conditionizr better, join us on GitHub.

Tinggal ganti bumbu CSS dengan kode berikut #ua {
background: #FFF;
position: relative;
}
#ua p span {
color: #FF7361;
}
#ua .wrap_ua {
height: 250px;
overflow-y: scroll;
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}
#ua .wrap_ua:hover {
height: 450px;
overflow-y: scroll;
}
#ua .spacer {
display: block;
height: 15px;
}
#ua .ua-top {
background: url(fade-top.png) repeat-x;
height: 33px;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
#ua .ua-bottom {
background: url( fade-bottom.png) repeat-x;
height: 33px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
}Syntax HTML sama saja. Good luck :)
Happy coding \m/