Mouseover thumbnail opacity

[kristyjcheng]

Hello,

I'm currently using the mouseover image for thumbnails option and would like the mouseover image to fade in. I'm not sure if I have the correct classes for the thumbnails, is this right?

.thumb has-mouseover-img mo_thumb{
opacity:0;
transition-duration: 150ms;
transition-timing-function: ease-out;
}
.thumb.has-mouseover-img:hover mo_thumb{
opacity:1;
transition-duration: 150ms;
transition-timing-function: ease-out;
}

Thank you!

[mariusjopen]

Dear @kristyjcheng
can you post a link to your website where you want to have the effect?

Best!

Marius

[kristyjcheng]

@mariusjopen Hi Marius, my website is kristyjcheng.com! I have the mouseover effect for the SPCA project currently.

[mariusjopen]

Dear @kristyjcheng
I need to ask Armin for that!

Best!

Marius

[kristyjcheng]

Hi @mariusjopen, any updates on this? Sorry to bother!

[mariusjopen]

Dear @kristyjcheng
not yet. In a bit!

Best!

Marius

[arminunruh]

please use this css:

.no-touchdevice .thumb.has-mouseover-img:hover .ph{
	img:first-child{
		opacity: 0;
	}
	img.mo_thumb{
		opacity: 1;
	}
}
.touchdevice .thumb.has-mouseover-img.hover .ph{
	img:first-child{
		opacity: 0;
	}
	img.mo_thumb{
		opacity: 1;
	}
}
.thumb.has-mouseover-img img.mo_thumb{
	opacity: 0;
}
.thumb.has-mouseover-img img.mo_thumb,
.thumb.has-mouseover-img img:first-child{
	visibility: visible;
}

the new lay theme update will include this as an option

[kristyjcheng]

@arminunruh Hi Armin! I tried adding this code to my site but the css is telling me "Unknown property 'img' Expected RBRACE" on the lines with img:first-child. Any ideas on what to do?

[mariusjopen]

Dear @kristyjcheng
are you still able to save it and does it work anyway?

Best!

Marius

[kristyjcheng]

@mariusjopen I have it applied to my website right now, it makes the hover image not show up at all?

EDIT: @arminunruh just updated Laytheme, the new option works now! Thank you for the mouseover hover option!

[mariusjopen]

Great! Happy to hear!