Modify "hover overlay" color for some elements

[otinik]

Hi!

I would like to edit the hover overlay color for some elements. I have set a general color for “hover overlay” that is ok for the most of the elements but not for all. Is possible to add an “EXTRA CLASS” in the image with link configuration to modify the color of this element?.

For example, in this URL (http://www.yesenglish.es/examenes-de-ingles/) i would set the “hover overlay” color “blue” instead yellow for the “Instituto Británico de Sevilla” logo at the bottom of the page.

If so, could you tell me how?.

Thanks.

[Mohammad – SUPPORT]

Hi,
Please insert this code at custom css code:-

.blue-hover figure.animated-overlay figcaption{
background-color:#424384 !important;
}

Now use .blue-hover as extra class for image element.

Thanks
Mohammad

[otinik]

Thanks for your quickly answer Mohammad!

Is possible to add some line to modify the opacity to 40% when you put over the image?

[David Martin – Support]

Hi,

Sure, here is 30% opacity color using the above code:

.blue-hover figure.animated-overlay figcaption{
  background-color: rgba(66, 67, 132, 0.3)!important;
}

– David.

[otinik]

Great! Thanks a lot.

[David Martin – Support]

Great, thanks Mohammad for the code.

– David.