Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 5, 2020 at 1:27 am #1190269
    aussiedropbear

    HI,

    I’ve been searching for a solution and I think i’ve got domestic blindness but cant see how to change this?

    For example, on the home page in the link below in PC, I have a layerslider and then 3 columns populated each with an image that I intend to link off to other pages.

    I presently have the styling of the image caption set to 0.4 of black which gives a nice translucent cover to the image behind.

    When you hover your mouse over the image, this translucent cover lightens but the issue I have is that I cannot read the text over the image in the 3rd column to the right.

    Is there a way in quick CSS or in the element or advanced styling to use a different colour when the mouse if hovered over these elements?

    Many thanks
    John

    March 5, 2020 at 7:27 pm #1190592
    Victoria

    Hey John,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
    opacity: 0.5 !important;
    background-color: #09028f !important; 
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 5, 2020 at 10:18 pm #1190682
    aussiedropbear

    Hi Victoria,

    Many thanks, that did the trick :)

    Please close thread.

    Cheers
    John

    March 6, 2020 at 12:01 am #1190702
    Jordan Shannon

    Hi,
    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Image hover colour’ is closed to new replies.