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
- Weeknotes: Llama 3, AI for Data Journalism, llm-evals and datasette-secrets - 23rd April 2024
- Options for accessing Llama 3 from the terminal using LLM - 22nd April 2024
- AI for Data Journalism: demonstrating what we can do with this stuff right now - 17th April 2024
- Three major LLM releases in 24 hours (plus weeknotes) - 10th April 2024
- Building files-to-prompt entirely using Claude 3 Opus - 8th April 2024
- Running OCR against PDFs and images directly in your browser - 30th March 2024
- llm cmd undo last git commit - a new plugin for LLM - 26th March 2024
- Building and testing C extensions for SQLite with ChatGPT Code Interpreter - 23rd March 2024
- Claude and ChatGPT for ad-hoc sidequests - 22nd March 2024
- Weeknotes: the aftermath of NICAR - 16th March 2024