Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Circle Navigation Effect - Bubble-like thumbnail preview using CSS3

tympanus.net

Post reply on HN
Print view View original

1–8 of 8 posts

Re: Circle Navigation Effect - Bubble-like thumbnail preview using CSS3

#3

Post by rglullis »

ruffdev wrote: post #2

This's pretty good if it's just CSS

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.

Re: Circle Navigation Effect - Bubble-like thumbnail preview using CSS3

#4

Post by 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.

Re: Circle Navigation Effect - Bubble-like thumbnail preview using CSS3

#6

Post by morrow »

rglullis wrote: post #3
ruffdev wrote: post #2

This's pretty good if it's just CSS

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.

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.
Post reply on HN