Efek Greyscale saat Hover Menggunakan CSS dan jQuery

28 Desember 09

Suatu sore saya bingung untuk membuat hover dengan background yang bisa berganti. Ternyata caranya cukup mudah yaitu hanya memanipulasi letak background dari link tersebut. Dalam pencarian tersebut saya malah menemukan tutorial jQuery dan styling dengan css yang cantik yaitu membuat efek greyscale pada image.

BUATLAH FILE HTML

Terlebih dahulu buatlah file html untuk mengelist gambar yang ingin diberi efek saat hover, yaitu :

1
2
3
4
5
6

<ul class="gallery">
	<li>
		<a href="#" class="thumb"><span><img src="http://duritajam.web.id/css/efek-greyscale-saat-hover-menggunakan-css-dan-jquery" alt="" /></span></a>
		<h2><a href="#">Image Name</a></h2>
	</li>
</ul>

Setiap gambar yang akan dilist akan bersarang dalam span tag. span Tag yang akan digunakan untuk memotong gambar untuk diperlihatkan dalam keadaan standar alias sebelum hover. Lihatlah gambar di bawah ini untuk mendapatkan visualnya.

STYLING CSS
Sedangkan untuk styling cssnya adalah sebagai berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

ANIMASI JQUERY

Untuk mendapatkan efek greyscale anda menggunakan library jQuery, atau bisa didownload disini,terserah anda ingin mengambil source secara online atau dari direktory anda, untuk mengambil sorce secara online menggunak script seperti ini:

1
2

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Logika yang digunakan adalah pada saat gambar dihover atau didekati dengan cursor maka gambar yang dihidden akan tampil dan ditambah dengan efek greyscale.
Untuk memberikan perlakuan tersebut dibutuhkan script jQuery dibawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(document).ready(function() {
 
	$("ul.gallery li").hover(function() { //On hover...
 
		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
 
		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
 
		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});
 
});

Nah selamat mencoba untuk melihat demonya disini.

2 Balasan ke “Efek Greyscale saat Hover Menggunakan CSS dan jQuery”

  1. rcaturandy mengatakan:
    24 Juni 2010 pukul 23:20

    akan saya coba.

    Balas
  2. rochsid tehape mengatakan:
    24 Juni 2010 pukul 23:42

    oke silahkan…

    Balas

Tinggalkan Balasan