Tutorial : Hover Image Got Something #1
Thanks to Afiqah Junizan for tutorial. Sorry gak ada live preview tapi ada screenshotnya :)
Template Designer/Denim
- Dashboard > Layout > Add Gadget > Html/JavaScript
- Paste code di kolom Html/JavaScript
Template Classic/Blogskin
- Design > Template > Edit HTML
- Paste code yang ada di bawah kode </style>
Codes
<style type="text/css">
.navs {
width:100%;
height:114px;
padding-top:3px;
padding-bottom:3px;
margin-top:0px;
font-size:11px;
font-family:arial;
text-align:center;
opacity:0;color:#777;
background-color:white;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}
.navs a {
color:white;}
.outside:hover .navs {
opacity:1;}
.outside {
float:left;
margin-right:2px;
height:120px;
width:95%;}
#outside1 {
border:5px solid #444;
background-image:url('URL Image');
background-color:#555;} </style>
<div class="outside" id="outside1"><div class="navs">Kata-katamu</div></div>
Kalo sudah di Preview lalu Save. Done! Semoga berhasil dan bermanfaat
ya. Jangan lupa comment kalo udah jadi, hehe..Thanks for reading, kalo
belum paham bisa tanya di comment box :) Bye!