Delay appearance of Project thumbnail mouseover image

[user-4'33'']

Hi,

is possible to delay the appearance of project thumbnail images when hovering them?
Is there a special CCS selector for this?

Many thanks!

[arminunruh]

just with custom css

this is the ususal css that makes the images show and hide:

.thumb.has-mouseover-img:hover img:first-child {
opacity: 0 !important;
}

.thumb.has-mouseover-img:hover img.mo_thumb {
opacity: 1 !important;
}

you'd need to use a https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
and a https://developer.mozilla.org/en-US/docs/Web/CSS/transition

[user-4'33'']

Thanks!

This code worked for me:

/* delaying the the appearance of project thumbnail mouse hover images */
.thumb.has-mouseover-img img {
    transition: opacity 1.0s ease;
}

.thumb.has-mouseover-img img.mo_thumb {
    opacity: 0;
    transition: opacity 1.0s ease 0.2s;
}

.thumb.has-mouseover-img:hover img:first-child {
    opacity: 0;
}

.thumb.has-mouseover-img:hover img.mo_thumb {
    opacity: 1;
}