Avada Forums Community Forum CSS for modal image hover opacity

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • doorsopenri
    Participant
    Post count: 2

    Hello!

    I am using a Modal Text / HTML Link with an image to link to a modal. To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.

    I currently have the below in the text/HTML field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image?

    {<img src="http://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
    }
    img:hover {
      opacity: 0.7;
    }

    Thank you!

    marklchaves
    Participant
    Post count: 873

    Hi!

    There are a couple of ways to target that specific image using CSS. Here’s one.

    
    /* Select the image that has a source ending in Lilly-Manycolors.png */
    img[src$="Lilly-Manycolors.png"]:hover {
      opacity: 0.7;
    }
    

    See a live demo on CodePen.

    Good luck!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.