White flash on hover element

[Nate_Sheridan]

I followed another forum post on how to change an image on hover, sorry I cant find the original post to link.

The advice given worked great, however I’m getting a strange white flash on hover just before the image changes.

Can someone please advise on how to remove or stop this?
I have tried changing the element background to black with no effect.

This appears on the three boxed I the purple section of the homepage:

Insight In

Thanks in advance

[tristup]

Hi @Nate_Sheridan,

Thanks for reaching out.
I have visited the section you specified and found the issue happen once. It due to the image loaded on mouseover taking little time and in-between time it shows the background color which is white.

I would suggest using the Element CSS for the Hover effect instead of the external classes like box1, box2, and box3. The class should look like the following.

$el.x-anchor {
    background: url(http://www.insightin.co.uk/wp-content/uploads/2021/02/1-OFF.jpg) no-repeat center center;
    background-size: cover;
    width: 600px;
    height: 300px;
    padding-top: 60px;
    border: 0px;
    font-size: 100%;
    transition: 0.25s all ease-in-out;
}

$el.x-anchor:hover {
    background: url(http://www.insightin.co.uk/wp-content/uploads/2021/02/1-OFF.jpg) no-repeat center center;
    background-size: cover;
    width: 600px;
    height: 300px;
    padding-top: 60px;
    border: 0px;
    font-size: 100%;
    transition: 0.25s all ease-in-out;
}

Please remember that you need to add the code for all three sections separately and remove the default background too.

Hope it helps.
Thanks

[Nate_Sheridan]

@tristup

$el.x-anchor:hover

That worked perfectly, and I learnt a lot in the process!

Thanks so much for sharing this solution.

[prakash_s]

Hello @Nate_Sheridan,

Glad that @tristup was able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks