cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Simple effect for roll over on grids, where the content slides based on the previous position.

You can see also in use here: http://worldbakingday.com

Libraries: jQuery and jQuery.transit

Comments

  1. Very cool effect. Sidenote: About the HTML, have you dabbled in HAML. I believe you could condense the HTML considerably by doing a loop in HAML. I am not that good at it, but just thought I would post for something to look at. If you do it in HAML...tell me how you did it! :) HAML reference guide http://haml.info/docs/yardoc/file.REFERENCE.html (look 3/4 down the page) All the best!

  2. @elmsoftware I've used Emmet (emmet.io) to generate the grid, that it's already built in on codepen. But you are right, I'm gonna change to HAML - it makes more sense. Thanks for the tip ;)

  3. very useful. i'm trying to use it for my website but it doesnt work correctly. when mouse is over, it works, but does not come back to the first image when mouse is out....i suppose there is something wrong in my js code. can anybodu help me? thanks. regards

  4. awesome work!!

    but how can i use this on two different wrapper on single page??

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...