alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/000000000000000016442616/tanya-css-atau-pake-jquery-ini-ya
[Tanya] CSS atau pake jquery ini ya ?
Gan, ada yg tau ga,, kiar kira ni pake jquery apa ga? atau ada ascript lain? atau hanya css3 ya?? di web http://www.designhotels.com/videos

#videos li div.videoOverlay, #videosDetail li div.videoOverlay {
text-align: center;
width: 195px;
height: 90px;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
background: url(../img/black70.png);
display: none;
}

itu kalo img nya di hover semacam ada effect gtu, bener ga mataku? cmiiw thx
kaga paham ane gan, tanya bawah ane aja ne emoticon-Big Grin
pake jquery itu...
jquery itu bos tapi klo situs berat gk cocok pake ini.
itu perpaduan Jquery dan CSS gan.
Quote:Original Posted By Muzzart
Gan, ada yg tau ga,, kiar kira ni pake jquery apa ga? atau ada ascript lain? atau hanya css3 ya?? di web http://www.designhotels.com/videos

#videos li div.videoOverlay, #videosDetail li div.videoOverlay {
text-align: center;
width: 195px;
height: 90px;
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
background: url(../img/black70.png);
display: none;
}

itu kalo img nya di hover semacam ada effect gtu, bener ga mataku? cmiiw thx


Halo masbroh! Salam kenal sebelumnya, gw @desainersingit yang lagi singit cari komunitas desain web Indonesia buat ngajak ngobrol dan berbagi ilmu (hehe).

kira kira ni pake jquery apa ga? atau ada script lain? atau hanya css3 ya?

Di website itu dia pake jQuery masbro. Jadi kira-kira begini kronologisnya sehingga terjadi effect seperti itu:

  1. Dia buat 2 komponen didalam satu <li> yaitu, div.videoOverlay dan <img>
  2. Sebenarnya 2 komponen tersebut menumpuk, tapi khusus div.videoOverlay disembunyikan dulu ( display: none; ), dengan tujuan nanti akan muncul saat <img> di-hover
  3. Lalu dibuatlah jQuery code seperti ini:
    Code:
        $('#videos li').hover(
    function() {
    $(this).find('.videoOverlay').fadeIn(150);
    },
    function() {
    $(this).find('.videoOverlay').fadeOut(150);
    });

    Saat <li> di-hover, div.videoOverlay akan di fadeIn. Setelah hover selesai, div tersebut akan di-fadeOut. Lihat lebih lanjut tentang fadeIn dan fadeOut disini dan disini.


Begitulah kira-kira ceritanya masbro. Kalo mau ngobrol lebih lanjut langsung aja mention ke @desainersingit emoticon-Malu (S)


Salam peace, CSS and HTML emoticon-I Love Indonesia (S)
@desainersingit
ane cuma nambahin aja, cuma pake css3 juga bisa gan. cek tutorilanya di [url]http://tympanus.n*t/Tutorials/OriginalHoverEffects/[/url]