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.

.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: -95px; 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://lh6.googleusercontent.com/-sc_Emu3etd8/UdB6FdJkkaI/AAAAAAAAFcs/fz9kw8G95r0/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://lh6.googleusercontent.com/-LFZmcq-tag8/UdB6FdD5VcI/AAAAAAAAFc4/W1DQIGJbC7A/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://lh4.googleusercontent.com/-0Lk4QSH5hwo/UdB6FUklVzI/AAAAAAAAFc0/sOMRbBBpXY4/w99-h33-no/Faceblog+Evolutions+%25283%2529.gif) 14px 16px no-repeat; padding-left: 133px; }

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

.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://lh6.googleusercontent.com/-sc_Emu3etd8/UdB6FdJkkaI/AAAAAAAAFcs/fz9kw8G95r0/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://lh6.googleusercontent.com/-LFZmcq-tag8/UdB6FdD5VcI/AAAAAAAAFc4/W1DQIGJbC7A/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://lh4.googleusercontent.com/-0Lk4QSH5hwo/UdB6FUklVzI/AAAAAAAAFc0/sOMRbBBpXY4/w99-h33-no/Faceblog+Evolutions+%25283%2529.gif) 14px 16px no-repeat; padding-left: 133px; }

JUDUL 1

DESKRIPSI

             

JUDUL 2

DESKRIPSI

             

JUDUL 3

DESKRIPSI

             

Iklan

About djosave

3S (Simple, Sabar, Sayang)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s