Can this website element be done via JQuery.

http://www.hyper-gear.com/ If you scroll down the site , and hover over the "Freestyle Series" & "Active Series" you can see that it will change the image.
The rest of the image around it will change too once hovered over, this can be done in Jquery right ?

 

Yes, it can. It can also be done in pure CSS, so why are you wasting jQuery/javascript on it?

 

Hmmmm...How can it be done via CSS?

 

element:hover {
//css rules goes here
}

It's a basic CSS :hover-rule

 

Yeah, for something like that I'd put the hover state as the background-image of a wrapper... one of the FEW times I'd consider the STYLE attribute acceptable as the value is both page and element specific.

If you use an anchor, the hover will occur all the way back to legacy IE though you can't get the nice smooth "fade-in" animation out of it.

HTML:

<a href="#" class="itemPlate" style="background-image:url(images/test@hovered.png);">
	<img src="images/test@normal.png" alt="describe this image">
</a>

Code (markup):

Then the CSS would be something like this:

.itemPlate {
	display:inline-block; /* or block or float or whatever */
	background-position:0 0;
}

.itemPlate img {
	vertical-align:bottom; /* prevents oddball margins in legacy IE */
	filter:alpha(opacity=0); /* IE 8 and lower */
	opacity:0;
	-webkit-transition:opacity 0.5s;
	transition:opacity 0.5s;
}

/* nab all three states so keyboard navigation isn't left out in the cold */
.itemPlate:active,
.itemPlate:focus,
.itemPlate:hover {
	filter:alpha(opacity=100); /* IE 8 and lower */
	opacity:1;
}

Code (markup):

You might have to special-case IE9, but since it lacks proper transition support there's really no reason to bother.

The idea is that you make the image completely transparent when not hovered - it will still be in "flow" so the anchor around it will be the same size as the IMG -- so the full declared background-image is shown. When you hover it the image will transition smoothly on modern browsers to fade in the image. Legacy browsers that lack transitions will lack the animation, OH WELL.

Using jQuery for something like this would be another example of "JS for nothing and your scripts for free" -- that ain't working, that's not how you do it.

But again to me 99.99% of what people use jQuery for falls into three categories:

1) things that would be simpler, easier to maintain and less code without jQuery, without counting the size of the library against it.

2) Things that are CSS' job.

3) Things that have no damned business on a website in the first place.

... and even with vanilla javascript, 90% of what people do falls into those latter two categories. See the idiotic asshat ways garbage like bootcrap vomits all over the "hamburger icon" menu thing by using scripting for no good reason.

 

@deathshadow It would be helpful if you posted solutions after testing them on jsfiddle or something. Currently, what you've posted there isn't doing anything (unless I am doing something wrong, then I am sorry): http://jsfiddle.net/g59q12yL/6/

 

A bit of a miss in the CSS, I guess: http://jsfiddle.net/g59q12yL/7/ that one works (however, not entirely as intended - I'm too lazy to redo it right now) - but the transition works, however, it needs to be on the background of the container, not the content.

 

oops, yeah, typos. should have been:

.itemPlate:active img,
.itemPlate:focus img,
.itemPlate:hover img {

Code (markup):

Side note, how the **** do you people even use things like jsfiddle? The tiny little code and preview boxes are so malfing useless I've never been able to tolerate dealing with it for more than a minute.

 

They are expandable. Just grab any side and expand it to any width/height you want to give you a better view.

 

I would spend so much time dicking with them I'd not get any code written, much less tested.... and even at their maximum size they're damned near useless. I guess much like the illegible colour highlighting crap or "version control software" it's just another of those things I don't even get the point of and find to cause more harm than good.