0

I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.

I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). 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? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.

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

Here's a screenshot of the interface with the code entered

Thank you!

dori
  • 1
  • 1
  • 1
    To target a specific image, it's easiest to use a class or ID on the given image, e.g. `` and then target the CSS via `img.modal:hover {...}` – nickpish Jul 09 '21 at 17:46
  • @nickpish Thank you! I How would I do that in html? It seems like doing the whole thing in that one box is the most direct. Currently have ' ' – dori Jul 09 '21 at 18:16
  • Add the class name where is says "CSS Class" then In WordPress Dashboard go to Appearance --> Customize --> Additional CSS and add .classname:hover{opacity: 0.7;} there. don't forget the "." before the class name. – Daniel Theman Jul 09 '21 at 22:05
  • @DanielTheman So I put 'img.modal:hover{opacity: 0.7;}' in the global custom CSS, '' in the modal HTML, and 'class="modal"' in the CSS class. The hover is not having an effect; did I miss something? Thank you!!! – dori Jul 10 '21 at 15:26
  • @dori For the css you wrote "img.modal" the class would need to go on the image tag – Daniel Theman Jul 12 '21 at 16:50

1 Answers1

0

As @daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:

.hoverop:hover{
  opacity:0.7;
}
Daniel Wom
  • 26
  • 2