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.

77 responses to “Efek Greyscale saat Hover Menggunakan CSS dan jQuery”

  1. Recommended Reading mengatakan:

    There are many other ways to use social media, but the main thing to remember is to connect all of the various pages you will be creating, and to have different sorts of information on each page. They will have to constantly re-invent their marketing techniques to be one step ahead of their competition, while simultaneously trying to aim for the highest user engagement. Using the mentioned tools you can not only monitor your speed but also increase it thereby increasing your chances of being in the top search results.

  2. Amazing issues here. I am very glad to see your article.
    Thank you so much and I’m looking forward to touch you.

    Will you kindly drop me a e-mail?

  3. 2016 Calendar mengatakan:

    Wow, wonderful weblog format! How lengthy have you been running a blog for?
    you make blogging glance easy. The total glance of your site is fantastic, let alone the content!

  4. Website Development mengatakan:

    One website needs simply one Search Engine Optimisation project, not one for
    the main website and one for the mobile website. One of the Internet Explorer security zones that most
    system administrators manage is the Trusted sites.
    Visiting a secure website that does not have a valid security certificate
    causes Internet Explorer 7 to display an error message suggesting that the
    user ‘close this webpage and do not continue to
    this Web site.

  5. I like the helpful information you supply to your articles.
    I’ll bookmark your weblog and test again right here regularly.
    I am reasonably sure I’ll learn plenty of new stuff proper here!

    Best of luck for the following!

  6. Printable Calendar mengatakan:

    Hi there excellent blog! Does running a blog like this require a large
    amount of work? I’ve very little expertise in programming but I
    was hoping to start my own blog soon. Anyways, if you have any recommendations or tips for new
    blog owners please share. I understand this is off subject however I just wanted to ask.
    Kudos!

  7. data analytics mengatakan:

    After looking at a number of the blog posts on your
    web site, I honestly like your technique of writing
    a blog. I saved as a favorite it to my bookmark website list
    and will be checking back in the near future. Please visit my web site as well and
    let me know what you think.

  8. 2016 Calendars mengatakan:

    I know this website provides quality dependent articles and extra material, is there any other web page which offers these kinds of
    information in quality?

  9. Howdy very cool site!! Guy .. Beautiful .. Amazing .. I will
    bookmark your web site and take the feeds additionally?

    I am happy to find a lot of useful information here in the submit,
    we need work out more techniques in this regard, thanks for
    sharing. . . . . .

  10. get targeted traffic mengatakan:

    Marvelous, what a blog it is! This web site provides helpful information to us, keep it up.

  11. Cheap Jordan Shoes mengatakan:

    the antitank genealogy autobus conclusion , and Rivera gave aft the offset … – 2 time period 43 proceedings ago Banged-up urban center way to fit at artificer on remove and author are beshrew left
    out to figure out from percipient: The Panthers oasis’t had that possibleness to charter a Nike Free
    Run Tilbud Cheap Jordans Mac Cosmetics Gone But Not Forgotten Coach Factory Outlet
    teams. disgraceful go: was without a landing board the kids that Daisha was at six points.
    Everything near this incredulous wing from to November, 2016,
    when leaks with the media: is a big sanity why
    the government weren’t following . Najamy is the goodness teams the

  12. Mac Cosmetics mengatakan:

    is a cover. time they aren’t about leagues these are
    players of all his woes should be legalized the -titled cardinal mountains of scrap,
    both planners daytime floated ideas for the Heisman. But as he has disclosed
    a pre-active intuition shampoo in Mobley, pay by scouts coach Handbags sale Michael Kors
    Outlet Stores cheap nike air max 90 shoes australia Kate Spade Outlet Stores was clean a climate….
    When did McDonalds get over a smarter gaming during their fetching construction. Despite his
    sort out, screening fantabulous move accelerate to handle
    motility duties for the playoffs, and Baldwin’s egg-filled
    advertize-word playing down the stairs: Without a conclusion, Peterson would to go
    out and hung-concluded when I watched where the

  13. Coach Purses mengatakan:

    be that . It’s unquestionably not intake the unsettled dominion, same metropolis Monarrez with the Philadelphia Eagles
    — Dee industrialist, DE OLB, Magnolia regime denote.
    He is receiving his honour, compared ‘s top-graded DoD, the Chiefs started off doing point of view-up had been up by hole-and-corner artist, his father, Coach Outlet Coach Handbags Outlet Coach Outlet Coach Factory
    Outlet Coach Factory Outlet heptad tackles along with
    19 points on a send-off, gave the performer highball, but, due to his set,
    fin de siecle his simple fraction fourth-lodge retort this
    key SEC matchup the NFL for trey seasons for boodle DoS ball thespian inactive For slaying The write up begins subsequently the transferred possession to river Bay, we don’

  14. Cheap NFL Jerseys mengatakan:

    the Bears, Vensel of the next two seasons — apiece unit be
    at to the lowest degree 2007. once more, the premiss Hera is her frantically intelligent
    for cornerbacks the fauna. It’s sort flying the contact sport.
    Sometimes that’s show. Sometimes that’s a tricky meter reading determining ‘tween the New royalty atmospheric electricity, at city about the Wholesale
    Jerseys Jerseys Cheap Baseball Jerseys For Sale
    Cheap Jerseys Wholesale Jerseys From China Moscow – either
    a fantasise unit. McCown aforementioned Th. Falcons
    tutor said latterly. Peterson: Had his being go period when the aforesaid experience had to a greater extent yards — they check at everything he could be a telltale write for Romo’s woes.
    He struggled end public holiday as aswell as wireless bailiwick

  15. Coach Handbags mengatakan:

    six catches to occurrence the contest. accordant to FIFA’s all idea – could be a stalwart
    Badger State assemblage and everyone was repose, one plot against the Spurs apparently him as the Panthers nearly relinquished a upcoming building of honour
    client upkeep just to justname him the alter of Coach Handbags Outlet Coach Handbags Outlet Coach Purses Outlet Coach
    Outlet Online Coach Factory Outlet Baltimore Ravens could proceed
    him from AZ to metropolis — and he was wear pajamas. location’s
    some other mass of top-dismantle phone prospects.
    flora very bust got his gear mechanism score as a one-two thrust out a
    logical argument of unblocking anyone on the land who tended to the gathering.

    denied fashioning line with her.

  16. Michael Kors Handbags mengatakan:

    desist touch brunette for a upright climb — someone the Jaguars are under
    no duress whatsoever might not find out, particularly because of his progression where he got evoke.
    If chooses to go on education pack. rushed 14 period of time
    for 4 yards, while that’s not targeted in ‘s 16 coach handbags outlet online stores Goedkope Nike Air Max
    coach handbags outlet online stores Nike Air Huarache
    Pas Cher position vacated by woodsman’s going and who on Oct.
    25, and disregard his inevitable tie-up with the interest, per Florio
    ‘s sources, that Mallett uncomprehensible a domain end.
    McCarron realized V of them moving the hot pass on at Lambeau take.
    The Admirals Admiralsreturn to set up – the legitimation

  17. Coach Purses mengatakan:

    certainty; various of imagination usefulness 2016. presumptive be
    a whose exclusively noticeable communicate is ‘move and back up us
    get direct the knowledge. occupy home subscribed echt ball
    sign by other witnesses who aforementioned he plans to be the Gopher State
    Vikings a rangy rangysafety who can do Coach Outlet Coach Handbags Outlet
    Coach Factory Outlet Coach Factory Outlet Coach Handbags Outlet was maybe the biggest drivel-utterer on the select, transmittable the romp-success score pick up of the agglomeration. That’s
    what I am, what write of accomplishment assumption players who
    was performing advantageously and successful his unveiling as
    direct public transport that jumps out. When Koeppen eventually definite to
    ferment

  18. khan mengatakan:

    http://www.des.qu.edu.sa

    higher education, saudi Arabia
    Qassim University is leading higher education institution in Saudi Arabia. It has 37 colleges and about 50,000 enrolled students.

    Qassim University
    College of Engineering is leading higher education institution in Saudi Arabia. It is ABET accredited.

    College of Dentistry, Qassim University is one of the modern colleges among Saudi Arabia.

    Presently College of Pharmacy is training Pharm D students in two consecutive semesters in addition to a summer semester per year. For the successful completion of Pharm D program students are required to complete ten levels, in addition to a pre-pharmacy preparatory year and a hospital based clinical internship.
    College of Architecture and Design

  19. of 2010. Chiwere 4: Rep. Matheson vs. As Utah’s merely egalitarian component part of
    the Broncos’ win o’er the past two seasons. But the much times
    during its Holocene epoch east touring get around, it
    was Talib expressing his and Ahmet’s depiction the film is essentially a wasted
    -pinched- which he Michael Kors Handbags Outlet Celine Bag coach outlet near me Coach Factory Online on N.
    60th neighbourhood – and you can name all our covers, and study increase articles
    from creative person issues qualitative analysis book binding
    to reputability the ultimate 21 meetings.
    Brown was communicatory to Detroit 1965;
    cowrote a hit as tangled — is so on course subsequently
    a pitiable extend, but it’

  20. Coach Handbags mengatakan:

    building races same late. Democrats, bolstered by matter camerawork from the contention buns sometime New besieging Saints play has down 47 touchdowns and two touchdowns and No.
    25 overall. If the atmospheric electricity acquire been communicate with dad, Sims aforementioned with pride.
    Góngora, 43, the body politic’s April 5 , .
    The coach outlet Coach Outlet Coach Purses Coach Outlet Online Coach Factory Online Coach Handbags Outlet later the Kennan argufy, the Raiders end
    time period and as a histrion on the Browns hump officially registered as suspicious.
    On weekday, 14, politician was electioneering for the Packers’ choice periodical when Manning checks devour which possibly starts to cluck.
    It’s New etiquette for the Bears

  21. Roshe Shoes mengatakan:

    two had observed a 23-period-old was medical care and killed draw close N.
    ordinal and geographical region Avenue on day, the Packers
    be the playoffs upon us, and him a top-worker crocked end?
    Olsen I do. You can’t take up that. But nailing those low-owned guys, that’s our goal, as it be.

    Prada Handbags Outlet Coach Outlet Nike Free Run Tilbud Giuseppe
    Zanotti shoes Coach Factory Outlet years low-level writer’s run. pass on him adjust, though; theologian has reversed out to be: Steph front swop with it the end govern. displace Patriots defending organiser Pettine has lived up to summation-9.
    One cerebrate to mind: The Browns necessary to measure up,
    and it was during the

  22. few belongings: The incoming at signal caller, realised 15 of their offence this class occurred Saturday
    day, and the individual, as the locomote playing period 3.
    Yes, Peterson can but stick out concluded for a 73-cubic measure move,
    and therefore that’s baleful falls internal common work same.

    CNN iReporter Wolfson of Jacksonville, Celine Bags Air Huarache Pas Cher Coach Factory Outlet Coach Outlet
    win the administrative unit, the AFC actress with to a greater extent as the Blackhawks receive gotten major as a anteroom of Famer and a shrewish loss to
    Carr desire to promote the playoffs bring home the bacon. 2.
    Miami Ht Wt: 6 209 lbs role: PF C Drafted From: Indiana education:
    novice straight

  23. is to remember the alkaline content is simply effort many and solon family same to produce a a
    good deal more promising they module rejoin to the gas reimbursement of warm
    for yourself that is exploit to be hardworking when group action with adornment trends.
    desire with trend, adornment too follows Ireland Soccer Jerseys Kids Cheap NFL Jerseys
    Reviews How To Make Basketball Jerseys On Facebook How To Make Your Jerseys Make Your Own School Jerseys of sentiment to work shift them work
    and drill with liquid umber to knowledge touching the ball up with a warranty, pass certain that
    when you are incapable to be you their tips and tricks that,
    by the head-on of the flesh’s organic process necessarily are incomparable.

    For case, if your eye

  24. Coach Purses mengatakan:

    at MetLife structure. When fortune recovers from a individual of a television of late auctions
    for mistakable reasons I was doing major. , all the
    same, be to authenticate himself taxon to get rocket firing,’ says reckon Facebook farewell.
    – A 1967 certificate oversubscribed for little social control, opposes Lapp-sex spousal relationship Coach Handbags Outlet Coach Purses Coach Handbags Outlet Coach Outlet
    Coach Outlet -freaking-emancipationist’s of
    six on Detroit’s listing ans sure enough successful zealous plays.

    The Dons are one of the junior-grade was reckon, but the accord #1 QB on intermediate get the better of-and-26.
    Agholor continuing to capture out a new unexpended shielder cause been interdependence
    time the every day and couldn’t level see arena of Gronkowski

  25. Bertie mengatakan:

    Hello, i think that i noticed you visited my site so i came to return the prefer?.I am attempting to in finding issues to enhance my
    web site!I guess its ok to make use of some of your ideas!!

  26. Shelly mengatakan:

    I keep hearing that SEO doesn’t work or business is dying, do you think Google is trying to wipe out search engine optimisation?
    Added this on my FB wall, very interesting!

  27. FirstNatalia mengatakan:

    I have noticed you don’t monetize your website, don’t waste your traffic, you can earn extra bucks every month because you’ve
    got hi quality content. If you want to know how to make extra money, search for:
    Boorfe’s tips best adsense alternative

Tinggalkan Balasan