Tutorial : Circle Hover Got Something

Hi! Read more yuk! #malas basa basi

Cara memakai Circle Hover Got Something:

• Follow Blog Fathya!
• Sering-sering comment
• Eh? :|
• Maap salah XD

The Real Tutorial:

• Masuk keakun blog kamu
• Tataletak >> Tambahkan Widget >> HTML\Javasript
• copy code ini:

.navs {
width:100%;
height:100%;
margin-top:10px;
text-align:center;
font-size: 22px;
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(http://th08.deviantart.net/fs18/PRE/f/2007/171/4/c/White_square____by_Andreita.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:235px;
width:235px;
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(https://static.zerochan.net/Hatsune.Miku.full.1536893.jpg);
background-position:50% 50%;
background-size:300px;
background-color:#FFFFFF;
}
#outside1:hover {
box-shadow: 0px 0px 10px 1px #ff6b97;
}
</style>
<center><div class="outside" id="outside1"><div class="navs">
Something that you wanna put
</div></div>
<style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px dashed #fac5d8;
border-radius: 20px;
background: #fac5d8;
padding:5px;
color:#ffffff;
font:14px Arial;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #fac5d8;
background:#ffffff;
padding:3px;
color:#888;
font:14px verdana;
transition: width 0.5s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:45px;
}
#nbc-searchexpandinput1:hover
{
width:110px;

CREDIT:http://maryam-pinkydiary.blogspot.com/2018/12/request-kak-fathya-cara-membuat-circle.html#more