Cara Membuat Hover Slide up Box

Catatan Pendek Penulis |Kali ini saya akan membahas mengenai Hover Slide Up Box, yang mana adalah box ini akan menampilkan tampilan seperti pop up ketika kursor berada pada area box.

JUDUL 1

DESKRIPSI

JUDUL 2

DESKRIPSI

JUDUL 3

DESKRIPSI

Ingin membuat tampilan seperti diatas? Itu adalah Hover Slide Up Box. Untuk membuat slide seperti diatas cukup dengan copy paste saja script dibawah pada saat entry postingan baru pada mode HTML

<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/AVvXsEhptqprPKOvDh_a4rvjublwS2XqCHyjE36vY79bDCvdcek9tmfBZwC6YW1haXyjNBWPL_qWGQ8gH3C8TVO5ZvZxv5W5x0mnjW1uXle7AV01Td6-LLHQOrkv9TvG_zpxE9PdxxFh6P9ywjYv/w99-h30-no/Faceblog+Evolutions+%25281%2529.gif) 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/AVvXsEjN20ffy-oUqb-WvqyiLdWXChyQJIwQDVAQNXex0Lx-fSl_TXH-PNR0UPkvgzmLXvecbUH_cMTO9NV_PswtoElXGOaY3M44_cGE4SJz_hMpGh4h_tnPrIiTC5r4EB2k1WZP2OaRwOaFiCGX/s50-no/Faceblog+Evolutions+%25282%2529.gif) 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/AVvXsEjrqS-oqQqZHCqb_rEPTIkoN1EDbHxZ8Z7S-8N9pRu0UzwK2NWL753O8Ol7Ti5M9b87KV9bYI5uKplKmyxLHT0SwPp4KIyev168IUQixYM0OnMcHnlSsPEmt6kWi_qzaJzQgRcskz9tOVnH/w99-h33-no/Faceblog+Evolutions+%25283%2529.gif) 14px 16px no-repeat; padding-left: 133px; }
</style>

<section class="slide-up-boxes">
<a href="#">
<h5>JUDUL 1</h5>
<div>DESKRIPSI</div>             
</a>

<a href="#">
<h5>JUDUL 2</h5>
<div>DESKRIPSI</div>             
</a>

<a href="#">
<h5>JUDUL 3</h5>
<div>DESKRIPSI</div>             
</a>
</section>