Minggu, 01 April 2012

Efek round hover pada image apabila dilalukan cursor






View Demo :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4i9IMDQeva2nQATh-DwrVeC6a9ReHOSdVL8Apm_NBKDCswdjmP6MW-YzB2j9Ob68Q6XqFTV-BN4ksR9n7WJxkOfO0iYk_nDM8_1Uk0FnhFx5MHn7Pjm_yuFsZjblRn93AYd2h8LAxFnk/s400/view-blogger-tutorial-demo.png


Klik gambar yang ada disana dan Lihat efek gambarnya sob :D
Lanjut ke pembuatannya :
Untuk membuat kesan khas pada gambar seperti preview di atas, sila ikuti tutorial di bawah:

1) Login akaun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari kod 

/* Headings
atau

/* Header

Copy kod di bawah dan paste SEBELUM kode /* Headings atau /*Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Contoh:

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

/*Header


4) Save dan lihat hasilnya.

Selamat mencoba! :)
Description: Efek round hover pada image apabila dilalukan cursor 
Rating: 4.5 4.5
Share on :
 
© Copyright Top Online News | Toko News 2011 - Some rights reserved | Powered by | Blogger.com.
Template Design by Herdiansyah Hamzah | Supported by Toko Blog N GoogleEfek round hover pada image apabila dilalukan cursor