Thursday, January 10, 2013

Image Circle Hover #1


안녕하세요 , こんにちは . Assalamualaikum. Cube click  preview dan hala cursor korang kat panda tu ..Ni first time atin buat image bulat hihi.. Amacam? ok tak. hihi.. Atin saja nak try mcm mana nka buat dia bulat . Atin guna hover yang image ari tu punye tp petak pulak huhu. OK nk tengok hover click preview k.



  • Blogskins/ Classic template : Paste codes ni sebelum code </style>
  • Template designer : Paste codes ni sebelum ]]></b:skin> 



img: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); }
}
</style>


  • Copy untuk image punye

<img src="URL IMAGE" style="height: 400px; width: 400px;border-radius:9999px;" />
</div>


No comments: