

Circle Navigation Effect - Bubble-like thumbnail preview using CSS3 - eddyweb
http://tympanus.net/Tutorials/CircleNavigationEffect/

======
jamesrcole
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
This is nice, except the grey navigation box obscures part of the image (Is
that a komodo dragon?)

------
ruffdev
This's pretty good if it's just CSS

~~~
rglullis
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.

~~~
morrow
You can, it wouldn't be too hard - just use the full-size image for the
thumbnail and set the background-size and background-position properties to
"crop" it. This would have the bonus effect of pre-loading the next image, and
would let you let you change the cropping of the image on the fly without re-
processing thumbnails.

------
barefoot
Does anyone have a screen shot for those of us without the ability to hover?

~~~
sp332
Click "Back to the article" in the upper right, there's a screenshot on that
page.

