How to Start a Blog? Panduan Lengkap Membuat Blog Hanya 30 Menit

Tutorial CSS image hover pada thumbnail Menjadi Buram

Tutorial kali ini membuat image thumbnail jika di sorot mouse atau mouse hover akan berubah menjadi buram, tentunya kita sering melihat thumbnail seperti itu di berbagai website, sehingga terlihat perbedaan yang terlihat bagus.

trik membuat hover thumbnail wordpress css3 Thumbnail blog saya juga terlihat seperti itu jika di sorot, saya akan mencoba memberikan tutorial agar terlihat seperti itu. caranya cukup simple, hanya edit css. Langkah-langkahnya adalah cari terlebih dahulu class dari image tersebut, di blog saya class image thumbnail adalah .featured-thumbnail img

Setelah ketemu tambahkan class baru di style.css template anda dengan menambahkan hover dibelakang nya letakkan dibawahnya. lihat contoh dibawah ini.

/*---Default : ----*/
.featured-thumbnail img {
    margin-bottom: 0;
    width: 100%;
}

/*-------Diberi hover:--*/

.featured-thumbnail img:hover  {
	transition: all 2s ease;
	opacity:0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	-webkit-transition: all 2s ease;
	-moz-transition: all 2s ease;
	-ms-transition: all 2s ease;
	-o-transition: all 2s ease;
	transition: all 2s ease;
	background: transparent;
}

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • click the following web page

    Pretty nice post. I just stumbled upon your weblog
    and wished to say that I have truly enjoyed surfing around your blog posts.

    After all I’ll be subscribing to your rss feed and I
    hope you write again very soon!

    • thank you for the compliment, I will always update my website. 🙂

Must Read...!
Membuat Thumbnail di Wp Job Manager WordPress

Tutorial kali ini adalah membuat thumbnail di Job Listing, seperti janji saya sebelumnya di...

Tutorial Membuat Web Lowongan Kerja dengan WordPress Part2

Melanjutkan tutorial sebelumnya Membuat website lowongan kerja dengan wordpress part1 sekarang kita lanjut bagian...

Close