HOME ART TRADE EXCHANGE BANNER TUTOBIES

Tutorial Hover Box


Assalammualaikum semua..Ramai yang tanya macam mana saya buat hover box seperti ini :
 >> Preview <<

1. Copy code di bawah ini dan paste dekat html/javascript.
<style>
.box5 {
border-radius:20px;
border:2px dotted #FFFFFF;
width:120px;
overflow:hidden;
height:20px;
color:#000000;
position:fixed;
right:30px;
top:250px;
text-align:center;
moz-box-shadow: 0 0 1px pink;
-webkit-box-shadow: 0 0 8px pink;
padding:4px;background: #FFFFFF;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
.box5:hover {
height:250px;
width:220px;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
</style><div class="box5">Title<br /><br />
Code banner atau apa-apa sahaja</div>
2.Save dan lihat hasilnya. 
UNGU : Boleh tukar {dashed , dotted , solid} "ikut cita rasa anda"
KELABU : Warna {dashed , dotted , solid} korang.
JINGGA : Warna tulisan "tajuk"
BIRU : Korang nak boz itu berada di sebelah kiri atau kanan.. Kalau kiri, tukar "left"
MERAH JAMBU : Warna background kotak box korang itu
MERAH : Tajuk BOX korang itu
HIJAU : Boleh letak code banner atau apa-apa sahaja. Kalau code banner, make sure " width: 147px; height: 137px;

Credit to >> Afiqah Junizan <<


Thank you for visit my blog

6 comments: