Add Hover or Multi Hover Effect for Image

Walau agak sedikit membosankan bila berbicara mengenai hover image Tapi apa mau dikata ide postingan yang didapat ya mengenai hal itu. Salah satu ide postingan tentang trik hover dan trick jQuery script seperti tidak ada ujungnya :p Koben akan berbagi kode simple, namun nilai seni tetap dipertahankan agar full stylish punya :))
Cek gi dot how to make fading magnifying glass overlay on image hover with jQuery and CSS3! Gue share yg versi CSS3 nya saja ya :">

span.rollover {
 opacity: 0;
 height: 250px;
 width: 500px;
 cursor: pointer;
 position: absolute;
 transition-duration: 1s;
 -o-transition-duration: 1s;
 -webkit-transition: -webkit-transform 1s;
 background:url(IMAGE-ICON-SEARCH-72px x 83px.PNG) center center no-repeat #000;
}
span.rollover:hover {
 opacity: .7;
 transition-duration: 1s;
 -o-transition-duration: 1s;
 -webkit-transition: -webkit-transform 1s;
}

Syntax HTML<a href="#">
<span class="rollover"></span>
<img src="LINK-IMAGE-HERE" alt="" />
</a>DEMO

Itu murni pake atribut CSS3, kalau mau menyertakan dgn jQuery, silahkan lihat resource originalnya dan jangan lupa acak2 artikel yg ada di sana ya webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3 ;)

Teknik penyisipan variabel <span> kunci trik ini. Agar tidak nanggung bagaimana jika variable <span> kita terapkan sekaligus untuk ke 4 sisi gambar :-O Ketika di hover pada kiri-kanan dan atas-bawah sebuah gambar, akan terlihat effect hover!
DEMO

hover dari kananhover dari atashover dari kirihover dari bawah

div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
div.multi-hover span {
color: #FFF;
height: 100%;
width: 100%;
opacity: 0;
font-size: 32px;
text-align: center;
position: absolute;
transition: all 0.3s linear 0s;
}
div.multi-hover span:nth-child(1) { /* kanan */
background: none repeat scroll 0 0 rgba(255,0,0,0.7);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* atas */
background: none repeat scroll 0 0 rgba(255,255,0,0.7);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* kiri */
background: none repeat scroll 0 0 rgba(0,204,0,0.7);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bawah */
background: none repeat scroll 0 0 rgba(0,102,255,0.7);
left: 0;
top: 80%;
}
div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}

Plain HTML<div class="multi-hover">
<span>hover dari kanan</span>
<span>hover dari atas</span>
<span>hover dari kiri</span>
<span>hover dari bawah</span>
<img src="LINK-IMAGE-HERE" alt="" />
</div>Apa masih tidak percaya penyisipan attr span bisa jadi begitu, nih salah satu cobtoh lagi www.gograybox.com/blog/hover-animations
Bonus link pilihan dr codepen dev mozilla
codepen.io/kindofone/pen/slnGx
codepen.io/calweb/pen/EAhCJ
codepen.io/simeydotme/pen/sunhf
codepen.io/chad/pen/uhgpe
codepen.io/anthonybruno/pen/bcwlj
codepen.io/ferronsays/pen/cuDqm
codepen.io/CreativeJuiz/pen/jGgIo
developer.mozilla.org/en-US/demos/detail/snake
developer.mozilla.org/en-US/demos/detail/jqeditor
Happy hover \m/