Home/ Questions/Q 4077546
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T17:33:49+00:00

I would like to delay the loading of an image on :hover for 1

  • 0

I would like to delay the loading of an image on :hover for 1 second every time it is moused over.

Is this possible?

code is: 

<style>
#bg {background-image: url(bg.png);
background-repeat: no-repeat;
position:absolute;  
margin-left: auto; margin-right: auto;display: block;
height: 354px;width: 571px;
border: 1px solid #000000; }
#delay {position: absolute;  
width: 100%;  
height: 354px;  
}
#delay:hover {background: transparent url(delay.png) no-repeat;}  
</style>
</head>

<body>
<div id="bg"> </div>
<div id="delay"> </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do it using CSS transitions, change the opacity from 0 to 1, in zero seconds, with a one second delay:

    #delay {
    background: transparent url(delay.jpg) no-repeat;
    opacity: 0;
   -webkit-transition: opacity 0s linear;
   -o-transition: opacity 0s linear;
}
#delay:hover {
   -webkit-transition-delay: 1s;
   -o-transition-delay: 1s;
   opacity: 1
}

    Currently only supported in Chrome/Safari/Opera

    • 0