Download Now Download Themes Gratis WordPress Responsive!

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...!
Theme WordPress Adamos Responsive Free

Adamos adalah template wordpress yang responsif dengan slide yang besar dan tentunya gratis, template...

Membuat Thumbnail di Wp Job Manager WordPress

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

Close