CSS image rollovers
17th August 2002
CSS Image Rollovers describes a brilliantly simple technique for creating the effect of an image rollover using only one image and no javascript. The effect works by creating a gif with a transparent background, then using a :hover
pseudo class to change the background colour of the the containing area. Pretty straight forward so far, but the clever part is that by making the transparent part of the gif an interesting shape (placing it around the outline of a shape in the image for example) you can give the impression of displaying a different image entirely.
More recent articles
- Gemini 2.0 Flash: An outstanding multi-modal LLM with a sci-fi streaming mode - 11th December 2024
- ChatGPT Canvas can make API requests now, but it's complicated - 10th December 2024
- I can now run a GPT-4 class model on my laptop - 9th December 2024