Articles
Fancy Hover Effect
I was recently asked to help creating very cool hover effect. I played around with it a little bit and come up with solution I would like to share.
You can see the final result at this page, and you can download the complete source code with examples from here.
HTML
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. |
<div id="featured-wrap"> <div id="featured-content"> <a href="http://www.jardinesdelte.com/"><img alt="Jardines" src="2_s.jpg" /></a> <a href="http://101.es/"><img alt="101 - Cientouno" src="1_s.jpg" /></a> <a href="http://www.missionbicycle.com/"><img alt="Mission Bicycle Company" src="3_s.jpg" /></a><a href="http://betyourfollowers.com/"><img alt="Bet Your Followers" src="5_s.jpg" /></a> </div> <div id="featured-preview"> <img alt="Jardines" src="2_b.jpg" /> <img alt="101 - Cientouno" src="1_b.jpg" /> <img alt="Mission Bicycle Company" src="3_b.jpg" /> <img alt="Bet Your Followers" src="5_b.jpg" /> </div> <div id="featured-overlay"> <div></div><div></div><div></div><div></div> </div> </div> |
Here we have 3 layers -
featured-content
- contains thumbnailsfeatured-preview
- contains preview imagesfeatured-overlay
- invisible container positioned above previous layers; will be used to handle hover events
jQuery
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. |
function showPreview(event) { $("#featured-preview").show(); }; function hidePreview(event) { $("#featured-preview").hide(); }; function updatePreview(index) { $("#featured-preview img").hide().eq( index ).show(); }; function movePreview(event) { var content_position = $("#featured-content").offset(); $("#featured-preview").css("left", event.pageX - content_position.left - 160); }; |
First we have some helper functions. showPreview/hidePreview
are fired when mouse is moved into/away from output container and movePreview
is fired while mouse is moved over. The preview image is updated via updatePreview
.
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. |
$(document).ready(function() { var content_els = $("#featured-content a"); var overlay_wrap = $("#featured-overlay"); var overlay_els = $("div", overlay_wrap) overlay_els .css('opacity', 0) .mousemove( movePreview ) .mouseenter(function() { updatePreview( overlay_els.index( this ) ); }) .click(function() { window.location.href = content_els.eq( overlay_els.index( this ) ).attr("href"); }) .show(); overlay_wrap .mouseenter( showPreview ) .mouseleave( hidePreview ); }); |
You can check out the demonstration and the code. :) enjoy.
User Comments
-
Sweet! Nice job man!
-
Very nice. Good job. fresh, new effect.
-
Very cool! I love it and I'm about to use it for my next website (over in Austria, Europe). The lady is a farmer and this will display her sheep and goats nicely. ;-)) Thanks.
Very nice! I'm surprised I haven't seen an effect like this one before. Good job.