Hover Oh Hover

Kemarin Beben Koben si Bloglang anu ganteng kalem tea berbagi cara trik hover pada pre atribut! Sekarang mari kita genjot apa saja yang bisa kita kreasikan dengan menggunakan attribute hover ¹

Sering gue tekankan, dengan menggunakan bahasa HTML yang sederhana or easy sudah bisa membuat kreasi full stylish! Kebayang kalau kita punya skill HTML yang mumpuni :D Coba sekarang agan ketikan keyword hover pada kotak serach blog ini :-" Seiring dengan kemauan membara, semoga skill kita semakin maju yah (*) Oke lah kalo begitu, tolong perhatikan dua contoh hover trick berikut ini ya :)

DavidDeSandromadethis.

17 Agustus 1945.

He.hee..heee...

demo

This is Coded

.logged:after {

content: "";

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: -1;

pointer-events: none;

-o-transition: 1s ease-out;

-moz-transition: 1s ease-out;

-webkit-transition: 1s ease-out;

}



.logged:hover:after {

z-index: 1;

background: rgba(0,0,0,0.8) url(http://YOUR-LINK-IMAGE-HERE.png) no-repeat center center;

}

Use it

<a href="http://YOUR-LINK-HERE.com/" title="" class="logged">YOUR TITLE HERE</a>

Banyak variasi sobat bisa ciptakan dengan dukungan HTML5 dan CSS3 :)

Happy hover \m/