Friday 29 November 2013

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 )


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

3 comments:

  1. akak ,, nk mntk tlong akak editkan tulisan blog saya :) saya dh atorkan blog . tukar skin baru tapi style exo tu mseh ada :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Makasih Kak :D Tutorialnya berhasil :)

    Izin repost ya, Kak. Credit aman :D

    ReplyDelete