Question

After learning the basics of CSS and jQuery, I’d like to set up a simple site for an artistic purpose, layered like this:

1. A background image that resizes with the browser window; either picking a random image every day or as slideshow > probably best with superbgimage/supersized/similar solution?

2. Up to 11 randomly positioned divs, each containing a word (link), blurred, that come in focus on hover > blur/focus effect probably best done with CSS sprites and .png files?

3. Clicking a link overlays everything with a centered div in which texts and images appear, the content in that div should be scrollable if more content exists than the viewport can show > is this one of these “lightbox” or “modal window” things?

Please see this approximate schematic here:

I have particularly no idea how to achieve 2., randomly positioning words over a background. And regarding 3. I’ve only found examples for image galleries and the like, but not inline(?) html content that can be styled as any other content. But maybe the whole principle can not be achieved? I’m rather happy to learn, even at my age, so if you could point me in the right direction…

Answer 1

1. Ok go for that
2. just generate a random number (in limits) with JS (Math.random()) and use this with $(element).css() – be sure to use the right CSS positioning
3. You are probably looking for sth like: http://fancybox.net/