Circle hover effect

Assalamualaikum and heyyo eberybuddy... ^^,

Harinie saya nak buat tutorial pasal circle hover macam tempat saya letak ask.fm tu...sebenarnya saya tak nak buat tutorial pasal apa yang saya letak kat blog nie sebab takut nanti ada pulak klon blog nie...tapi, kesian pulak dengan orang yang ada request pasal tutorial nie kat ask.fm...

This is a tutorial about circle hover effect ( rotate , scale , opacity )

Live Preview

For template designer :

www.blogger.com/home --> Layout --> add gadget --> HTML/Javascript

For blogskin :

www.blogger.com/home --> Template --> Paste it anywhere you want it to appear

The Code

<style type="text/css">
.navs {
width:100%;
height:100%;
margin-top:10px;
text-align:center;
border-radius:50%;opacity:0;
 -webkit-transform: scale(0) rotate(-360deg);
 -moz-transform: scale(0) rotate(-360deg);
 -o-transform: scale(0) rotate(-360deg);
 -ms-transform: scale(0) rotate(-360deg);
 transform: scale(0) rotate(-360deg);
background-color:white;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmeNLJCwEVfkpU65-Oc2Z6GsYSsEQX2XmDsEMl9CDDbiWLO6thjewFqxfbvkPNxZvveM26Bq9iX4DNrf34ame28IbAbTtTNM52vCDKBHAlgee0DpZ_CJRrAFEeT7R1t_pikVh3OvTVRs/s1600/spotty-pink-background-seamless.jpg);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;}
.navs a {
color:white;
}
.outside:hover .navs {
opacity:1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
.outside {
height:250px;
width:250px;
border-radius:50%;
 box-shadow:
  inset 0 0 0 15px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

#outside1 {
background-image: url(http://wallpapers.avantzone.com/data/media/102/Forever_Friends_14.jpg);
background-position:50% 50%;
background-size:330px;
background-color:#FFFFFF;
}
#outside1:hover {
box-shadow:
  inset 0 0 0 0px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
}
</style>
<center><div class="outside" id="outside1"><div class="navs">
ANYTHING HERE
</div></div></center>

The Note

Blue text : Background image URL find at Google

Fuchsia text : Width and height

Orange text : Color code Find Here

Red text : Put anything you want

Preview and save when done...comments are really appreciated...

Btw, I have update my old blogskin... Blogskin : I'm Rilakkuma , Blogskin : Blue wonderland