Membuat box elastis dengan Css

Hai sobat postingan kali ini saya akan membahas mengenai cara membuat box elastis yang menurut saya keren. box ini saya buat sendiri dengan css karena lagi bete dan gak ada kerjaan mending bereksperimen dengan kode - kodean box ini aku buat karena dapat inspirasi dari Gubhugreyot dimana disana banyak tutorial - tutorial keren. anda cukup menyimpan kode di bawah ini dalam Gadget HTML/Javascript.

<div class="systemBox">
<h2>Box Office</h2>
<div class="konten">

Disini isi dengan konten anda

</div>
</div>
<style>
/* Coding pas2_an by system of blog http://zhinto.blogspot.com */
.systemBox {
    background: #DDD;
    width: 300px;
    height: 55px;
    overflow: hidden;
    padding: 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 2px solid #333;
    -moz-box-shadow: 0 0 5px hsla(0, 93%, 9%, 0.7);
    -webkit-box-shadow: 0 0 5px hsla(0, 93%, 9%, 0.7);
    box-shadow: 0 0 5px hsla(0, 93%, 9%, 0.7);
    margin: 0 auto;
    display: block;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out
    }

.systemBox:hover {
    background: #DDD;
    height: 400px
    }

.systemBox .konten {
    overflow: auto;
    height: 81%;
    border: 2px solid #222;
    padding: 5px;
    margin: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-align: justify
    }

.systemBox h2 {
    display: block;
    font: bold 30px/30px Arial, sans-serif;
    background: #999;
    padding: 10px 5px;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 10px 0
    }
</style>

Kenapa elastis..? karena box ini di buat dengan css3 yang menggunakan efek transition dimana berguna buat memperlembut gerakan saat box nya terbuka.