Cara Membuat Show hide Otomatis Ketika disentuh Cursor

Kali ini saya ingin membuat show hide otomatis dengan css3 ketika disentuh cursor seperti yang ada pada contoh gambar dibawah.

Gimana?? menarik bukan..??

Baiklah langsung saja Ikuti langkah-langkah sebagai berikut :
1. Login ke blogger
2. Masuk ke rancangan
3. Pilih edit HTML
4. Cari kode ]]></b:skin> dan Letakkan kode CSS berikut diatasnya :
 

.bgsGR_onmos {
height: 32px;
width: 260px;
border: 2px solid #666666;
background: #CCCCCC;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
padding: 5px 5px;
margin: 15px auto;
font: 11px Arial;
color: #003366;
overflow: hidden;
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos:hover {
min-height: 250px;
border: 2px solid #333333;
background: #111;
box-shadow: 0 1px 15px #000;
-moz-box-shadow: 0 1px 15px #000;
-webkit-box-shadow: 0 1px 15px #000;
color: #000; text-shadow: 0 1px 1px #888;
}
.bgsGR_onmos h3, .jerohan h3 {
font-size: 14px;
font-family: Droid Serif;
font-weight: bold;
color: #000;
text-align: center;
text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
padding: 3px 10px;
background: #bbb;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.bgsGR_onmos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
width: 70px;
border: 4px solid #666;
padding: 3px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
float: left; margin: 0 10px 5px 0;
background: #222;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 4px solid #CCCCCC;
background :#666;
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
margin-top: 20px;
margin-left: 15px;
}
.bgsGR_onmos img.minianima:hover {
-o-transform: scale(1.4) rotate(360deg) translate(0px);
-moz-transform: scale(1.4) rotate(360deg) translate(0px);
-webkit-transform: scale(1.4) rotate(360deg) translate(0px);
}
.jerohan {
margin-top: 15px;
height: 200px;
overflow: auto;
padding: 0 5px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; background: #CFE7E9;
}
.jerohan:hover {
background: #333;
color: #eee;
text-shadow: 0 0px 1px #fe0303;
}
.jerohan h3 {
margin: 20px 0;
max-width: 204px;
background: #66CCFF;
box-shadow: 0 1px 12px #eee;
-moz-box-shadow: 0 1px 12px #eee;
-webkit-box-shadow: 0 1px 12px #eee;
}
.jerohan h3:hover {
background: #888;
border: 1px solid #666;
box-shadow: 0 1px 12px #fff;
-moz-box-shadow: 0 1px 12px #fff;
-webkit-box-shadow: 0 1px 12px #fff;
}
.jerohan ul {
padding: 0;
margin: 0;
list-style: none;
}
.jerohan li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.jerohan li a{
color: #03d8fe;
padding: 0;
margin: 0;
text-decoration:none;
font-size: 12px;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.jerohan li a:hover {
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
color: red;
text-shadow: 0 1px 1px #000;
margin-left: 20px;
}

5. Setelah itu, copy kode berikut di bawah kode ]]></b:skin>

<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->

6. Terakhir copy kode dibawah ini dan letakkan di kolom entri/Membuat Posting.

<div class="bgsGR_onmos"><h3>
Show</h3>
<div class="jerohan">
<h3>
judul Terserah</h3>
isi Teks atau HTML</div>
</div>

KET::: teks yang bewarna orange adalh Judul kode, dan yang berwarna merah Isi dengan kode script.

7. Setelah Itu Lihat Hasilnya.