Thumbnail background colour before rollover

[mike]

Hi All,

I hope you can help. I am trying to create thumbnails that have a 70% background colour over the thumbnail image BEFORE rollover rather than after (which can be done easily in the customise section of Lay).

I have tried to write the css but it doesn't seem to work. Below is a link to a faked version (using two images rather than code):
http://www.martinedwardsarchitects.com/overview/

Thanks in advance!

M

[mariusjopen]

Dear @mike

try to add something like this to your CUSTOM CSS:

.thumbnail-wrap a img {
    opacity:  0.7 !important;
}

.thumbnail-wrap a img:hover {
    opacity: 1 !important;
}

It is just a quick sketch. But it should do the job.

Best!

Marius

[mike]

Thanks Marius!

It works for opacity but does not add the background colour. I want a #e2eded blue to present in the thumbnail before rollover. I've tried adding background colour to the css you gave me but it doesn't seem to work. Any ideas?

Thanks again,

M

[mariusjopen]

Dear @mike

ah. I see.

This is not really possible.

You could use CSS with blending modes:
https://css-tricks.com/basics-css-blend-modes/

But they don't get supported by all browsers.

Best is to use prepared images.

Marius