top | item 3143044

Circle Navigation Effect - Bubble-like thumbnail preview using CSS3

39 points| eddyweb | 14 years ago |tympanus.net | reply

7 comments

order
[+] jamesrcole|14 years ago|reply
Nice.

A possible extension:

Say the user hovers over the right arrow. Show the bubble, but also in the available space to the right of it show other bubbles, showing 2nd next image, the 3rd next image, and so on. That could let you see what's coming up and choose the particular one you want to see.

[+] dubya|14 years ago|reply
This is nice, except the grey navigation box obscures part of the image (Is that a komodo dragon?)
[+] ruffdev|14 years ago|reply
This's pretty good if it's just CSS
[+] rglullis|14 years ago|reply
Only the animation that shows the image on the background. Basically it is one "transition" directive from the background of a button into a pre-processed thumbnail.

I would be more impressed if the css was also responsible for cropping the larger image and creating a sprite for the button.

[+] barefoot|14 years ago|reply
Does anyone have a screen shot for those of us without the ability to hover?
[+] sp332|14 years ago|reply
Click "Back to the article" in the upper right, there's a screenshot on that page.