Changing image on hover with css without a delay

You create a menue in your web page, that is not made of simple text links, but instead there is a small image for each link that changes slightly wenn hovering over it with the mouse. Each image is placed via the "background"-attribute of the "div"-tag. When hovering over that image, the "hover"-method calls the 2nd image, that shall be shown. Now there is the problem, that when loading the page for the very first time, only the 1st image of every link is loaded. The 2nd ones only gets loaded when hovering over them the first time. And exactly in that moment a very very short delay in loading the 2nd image ist noticeable.

Image with a text overlay that is dynamically generated

I want to display an image with a title that lays on top of the image. This title should be dynamically generated, therefore no photo editing tool can be used in this situation. The text comes from a dynamically generated JSON object, which then can be used by a JavaScript in order to inject the title information into a website. The only technologies that can here be used is web technologies such as XHTML and CSS.
Subscribe to img