다이아몬드 말씀


HOME ABOUT STUFFS LINKIES NEWER OLDER +FOLLOW
Bonjour'!

Hi visitor(s). I'm AQil | 13 | Kemaman. Don't copy anything without my permission. Be nice here and do come again!

 Diamond Light


Credits
크레딧

© All in this blog are mine unless stated. Inspired from Zureen . And the basecode from Esha. Edited by Aqil . Cute icon by Pixel
Tutorial: Circle image hover {1}
Sabtu, 31 Ogos 2013 | 063 581 Diamond Comment[s]

Assalamualaikum. Okay, Mimi ade request macam mana nak buat circle image hover macam saya. Kalau tak faham, cuba halakan cursor dekat sidebar bahagian director. Nampak dia berpusing-pusingkan? Macam tu lah. Untuk lebih selamat lagi, klik preview dekat bawah ni.


1. Dashboard > Edit HTML
2. Tekan F3 dan paste code ni atas code </style>.
#love{
width:85px;
height:85px;
border: 1px solid #e6e6e6;
padding:4px;
background:#fff;
border-radius:9999px;
}
#love:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
} 

3. Kemudian, paste code ni pula di sidebar korang. Make sure gambar korang bentuk Square.
<center>
<img id="love" src="URL IMG" transform="rotate(225deg)" width="100" /></center>