Membuat Efek Round Image dengan CSS

Membuat Efek Round Image CSS

Tutorial Membuat Efek Round Image Di Blog - Membuat efek melingkar dipojok gambar. Kali ini saya akan share tutorial untuk membuat image yang akan mempunyai efek round pada Image atau sekeliling image akan seperti ada lingkaran yang mengelilingi image dan di beri efek hover. Langsung anda coba cara berikut ini.

Sehingga ketika image didekati oleh Cursor maka otomatis image akan mempunyai efek round dan ada warna hovernya.

Berikut ini cara membuat Membuat Efek Round Image Di Blog

Berikut ini adalah script yang harus anda gunakan :

1. Buka Blog anda

2. Silahkan masuk pada edit html

3. Kemudian cari kode berikut ini ]]></b:skin>

4. Jika sudah ketemu silahkan anda copy code dibawah ini.

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;
}

Keterangan :

- Opacity adalah tingkat transparansi dari efek round image

- Border adalah warna border image, silahkan anda seuaikan kode warnanya

NB : jangan lupa save dulu template anda.

5. Langkah terakhir adalah save template anda. 

Oke sekian tutorial Membuat Efek Round Image dengan CSS malam ini, and good nite guys ..