A short one today. I’ve made it a personal mission in the past couple of days to recreate a cool CSS navigation effect I found recently. There are 2 case scenarios I’ve been thinking about to do this
1) http://icofx.ro/ Check out the hover effect in the website navigation
It’s called llavalamp effect which is an appropriate name for the visual effect it seems to make. It hovers to the link/text that the cursor goes to and automatically changes width to match the size of the word it surrounds. It seems to do it using a background image on the website. This background image repeats on X axis but goes across so doesn’t scale but just blends into an otherwise clear white default background. I thought.
To find out, I opted for a reverse engineering technique to inspect the site, piece by piece in an attempt to find out what makes the effect tick. It’s worked for me in the past I just couldn’t get to the images that would make it possible so I couldn’t recreate the precise effect.
I could quite figure out…
How does it work that a it scales but does not repeat?
How was the background image generated?
What drives the hover effect?
And why on earth will the effect not work even in a modern browser like FireFox 25?
Then, by chance I found the Holy Grail.
Check out the demo and the downloads.