CODEWITHSUNDEEP
htmlcss
A B
A B

Reputation: 65

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:

a.type1,
a.type2{
    position: relative;
}

a.type1:hover:after,
a.type2:hover:after{
    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.

Upvotes: 3

Views: 2157

Answers (1)

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

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.type1,
a.type2 {
  position: relative;
}
a.type1:after,
a.type2:after {
  position: absolute;
  content: url(https://i.sstatic.net/rG8mD.png);
  transition: opacity 2s;
  opacity: 0;
  pointer-events: none;
}
a.type1:hover:after,
a.type2:hover:after {
  opacity: 1;
  transition-delay: 1s;
}
<a class="type1">Type One</a>
<br />
<a class="type2">Type Two</a>

Upvotes: 2

Related Questions