Membuat spoiler animasi dengan css3

Membuat spoiler animasi dengan css3. kali ini saya akan share tentang membuat spoiler animasi yang mana saat mouse di arahkan ke tombol maka box spoiler akan terbuka secara otomatis.

trik ini sangat berfungsi saat kita mau posting kode yang banyak atau apapun yang ingin kita sembunyikan agar konten terlihat rapi.
Untuk contohnya silahkan lihat demo di bawah ini, coba anda arahkan mouse anda ke box di bawah ini:

Motivasi sukses

1.Mereka selalu menemukan cara untuk mengembangkan potensi mereka dan menggunakannya dengan efektif.
2.Mereka sibuk, produktif, dan proaktif, bukan luntang-lantung.
3.Mereka mau menyesuaikan diri dengan sifat dan pemikiran orang lain.
4.Mereka memiliki ambisi atau semangat.
5.Tahu benar apa yang diinginkan.
6.Carilah dan temukan kesempatan di mana orang lain saat orang lain gagal menemukannya.
7.Orang sukses melihat masalah sebagai bahan pembelajaran dan bukannya kesulitan belaka.
8.Fokus pada solusi, bukan berkubang pada masalah yang ada.
9.Menciptakan jalan suksesnya sendiri dengan pemikiran dan inovasi yang ada.
10.Orang sukses bisa merasa takut, namun mereka kemudian mengendalikan dan mengatasinya.
11.Mereka mengajukan pertanyaan yang tepat, sehingga menegaskan kualitas pikiran dan emosional yang positif.
12.Mereka sangat jarang mengeluh.
13.Mereka tidak menyalahkan orang lain, namun mengambil tanggung jawab atas tindakan mereka.
14.Mereka inovatif dan bukan plagiat.
15.Mereka tidak menunda-nunda apa yang ada.16.Mereka menghadapi dan menyelesaikan masalah dengan segera.

Motivasi



begitulah efek spoiler yang akan kita buat, jika anda tertarik untuk membuat seperti itu berikut ini caranya:
<div class="systemBox">
<h2>Motivasi sukses</h2>
1.Mereka selalu menemukan cara untuk mengembangkan potensi mereka dan menggunakannya dengan efektif.
2.Mereka sibuk, produktif, dan proaktif, bukan luntang-lantung.
3.Mereka mau menyesuaikan diri dengan sifat dan pemikiran orang lain.
4.Mereka memiliki ambisi atau semangat.
5.Tahu benar apa yang diinginkan.
6.Carilah dan temukan kesempatan di mana orang lain saat orang lain gagal menemukannya.
7.Orang sukses melihat masalah sebagai bahan pembelajaran dan bukannya kesulitan belaka.
8.Fokus pada solusi, bukan berkubang pada masalah yang ada.
9.Menciptakan jalan suksesnya sendiri dengan pemikiran dan inovasi yang ada.
10.Orang sukses bisa merasa takut, namun mereka kemudian mengendalikan dan mengatasinya.
11.Mereka mengajukan pertanyaan yang tepat, sehingga menegaskan kualitas pikiran dan emosional yang positif.
12.Mereka sangat jarang mengeluh.
13.Mereka tidak menyalahkan orang lain, namun mengambil tanggung jawab atas tindakan mereka.
14.Mereka inovatif dan bukan plagiat.
15.Mereka tidak menunda-nunda apa yang ada.16.Mereka menghadapi dan menyelesaikan masalah dengan segera.

<h3>Motivasi</h3>
</div>
<style>
.systemBox {
background:#DDD;
width:500px;
height:50px;
overflow:hidden;
padding:5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-moz-box-shadow: 0 0 5px hsla(0,93%,9%,.7);
-webkit-box-shadow: 0 0 5px hsla(0,93%,9%,.7);
box-shadow: 0 0 5px hsla(0,93%,9%,.7);
margin:0 auto;
}
.systemBox p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding-top:20px
}
.systemBox:hover {
background:#DDD;
height:100%;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-box-shadow: 0 0 5px blue;
-webkit-box-shadow: 0 0 5px blue;
box-shadow: 0 0 5px blue;
}
.systemBox:hover h2 {
margin-top:-60px;
}
.systemBox:hover h3 {
margin-top:50px;
padding:5px;
text-align:center;
font-size:20px;
}
.systemBox h2 {
background:hsla(0,100%,50%,.7);
color:black;
height:28px;
padding:5px;
text-align:center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);
box-shadow: 0 0 7px hsla(33,50%,43%,.8);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
.systemBox h3 {
margin-top:-195px;
background:hsla(0,100%,50%,.7);
color:black;
height:28px;
padding:5px;
text-align:center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border:2px solid gray;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px hsla(33,50%,43%,.8);
box-shadow: 0 0 7px hsla(33,50%,43%,.8);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
}
</style>

ok..hanya seperti itulah triknya, silahkan di coba dan praktekkan.