I am relatively new to using jQuery and I would like to incorporate the Image Hover plugin on my website. Specifically, I have a collection of thumbnails representing various projects on my site. What I need help with is implementing a feature where when you hover over one of these thumbnails, a pattern associated with that specific image appears. Can anyone assist me in coding this functionality?
Here is a snippet of the code related to the fade effect:
if(opt.fade){
var offset = node.offset();
var hover = node.clone(true);
hover.attr('src', hoverImg);
hover.css({
position: 'absolute',
left: offset.left,
top: offset.top,
zIndex: 1000
}).hide().insertAfter(node);
node.mouseover(
function(){
var offset=node.offset();
hover.css({left: offset.left, top: offset.top});
hover.fadeIn(opt.fadeSpeed);
node.fadeOut(opt.fadeSpeed,function(){node.show()});
}
);
hover.mouseout(
function(){
node.fadeIn(opt.fadeSpeed);
hover.fadeOut(opt.fadeSpeed);
}
);
}else{
node.hover(
function(){node.attr('src', hoverImg)},
function(){node.attr('src', orgImg)}
);
}