Ajax Loader
×

product-item-additions-info

This is made width both Css and Javascript, though the javascript is only for activating the menu.

The additional info loading up when hover is made purely with css, and is "dynamic" so it will expand upwards with whatever content is put there.

This is possible with the mixed use of transform:translate and position:absolute.

I found that moving a element with transform:translate 100%, positioned 100% of the elements height and not the parents height, wich made this possible without use of javascript.

Credits:

The beautiful product image: http://chrishavron.deviantart.com/art/Shoe-Product-Shot-153146832

Inspiration after seeing this piece of work by: Virgil pana: http://dribbble.com/shots/986548-Product-Catalog

Inspiration from the new myspace design: http://myspace.com

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

9 Comments

× New

Sign In to comment

Zoltan Bereczky:

Nice one.
Is there a way to contact you directly, email or something?

Emil Møller:

Hi Clickforamin,

I'm sorry for the late answer,
It's just plain css (except the slideout menu).
So it really just depends on your markup :)

clickforamin:

Excellent Work...! Can you suggest how can i integrate this in my WordPress site.

Thanks in advance..

Rooh Souza:

Nice and Professional Job! :)
- From Brazil

Emil Møller:

@LukeVj

Thank you very much
I'm a big fan of your work!

Had to say :)

LukyVj:

I'm a big fan of this item ! Keep up good work !

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+