Pure CSS Roll over Image map zoom type thing…
Yesterday, I heard a couple of my lecturers talking about a page that one of them was trying to sort out. He was after, if I understood it correctly, a way of increasing the size of an area of the page or an image (so, zooming, in effect) whilst leaving the other areas unaffected.
So I sat about working this out, starting at about 1am. I did some basic work on it, before getting stuck on some of the logic, at which point I headed to bed.
This morning, returning with a refreshed mind, I was able to see where I was going wrong. Here’s a link to the working files.
What’s basically happening is that there are 5 divs that have been positioned absolutely – one in each corner and a fifth in the middle. When you hover over any of them, their size and positioning is altered and their z-index is upped (the font-size is also increased). It’s easy, really.
As you can see, it’s pretty basic, but it does the job. It can be used with sprites as background images and could prove useful.