Image Overlay custom colors

[dschuette]

How can I make different image links have different colored overlays?
I have four images and I want each to turn a different color when you mouse over it, but I can’t seem to make them any color than what I have set as the “master” overlay color in the theme settings.

.button1 a.img-link:hover {color:#84152b;}

.button2 a.img-link:hover {color:#8cb7bc;}

.button3 a.img-link:hover {color:#a7c43d;}

.button4 a.img-link:hover {color:#f37b21;}

[Rui Guerreiro – SUPPORT]

Hi,

It seems it’s already working like that. can you confirm?

-Rui

[dschuette]

I added an additional overlay on top of the default, but it’s just hiding what’s already there. (the four buttons at the bottom)

http://f78.5eb.myftpupload.com/

Here’s what it looks like with a blue “default” overlay, and my overlays on top of it at 50%. I can change the color of the default overlay, but I can’t get rid of it.

.button1 figure.animated-overlay > a:hover {
background-color:rgba(132, 21, 43, .5);
}

.button2 figure.animated-overlay > a:hover {
background-color:rgba(140, 183, 188, .5);
}

.button3 figure.animated-overlay > a:hover {
background-color:rgba(167, 196, 61, .5);
}

.button4 figure.animated-overlay > a:hover {
background-color:rgba(243, 123, 33, .5);
}

[David Martin – Support]

Sorry, I am not 100% sure what you are trying to do –

Override this:

figure.animated-overlay figcaption {
    background-color: rgba(30,115,190, 0.90);
}

Or remove it?

[dschuette]

That did it. Thanks, David!

–resolved–

[Rui Guerreiro – SUPPORT]

Great, Thanks David.

-Rui