M W M W - 1 year ago 90
HTML Question

Delay image display on hover

I want an image to be displayed after hovering over a specific element for one second.

I've looked through old posts on SO but haven't found anything regarding displaying an image- only modifying it.

Right now, here's an example of what I have in CSS:

position: relative;

content: url(imageurlgoeshere);
position: absolute;
z-index: 3;


I've tried adding transition-delay and others however I'm fairly sure that it doesn't work because content is not an animatable property.

While I think using opacity might work, I don't want the image to be rendered until the user hovers.

I've tried using background-image, but I ran into some trouble.
In some cases, the cursor flickers due to what I can assume to be the element disappearing and losing it's hover state.

Answer Source

You can use transition to hide and show images using the opacity property, with transition-delay used to delay the change of opacity.

In this example, pointer-events: none is placed on the pseudo elements so that they will only show when the links themselves are hovered.

Here is a updated fiddle:

a.type2 {
  position: relative;
a.type2:after {
  position: absolute;
  content: url(http://i.stack.imgur.com/rG8mD.png);
  transition: opacity 2s;
  opacity: 0;
  pointer-events: none;
a.type2:hover:after {
  opacity: 1;
  transition-delay: 1s;
<a class="type1">Type One</a>
<br />
<a class="type2">Type Two</a>