Home Forums Community Forum Apply Rollover to an image? (No portfolio)

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • CLYON
    Participant
    Post count: 2

    It is possible to apply the “Rollover” effect of the Portfolio to a single image on my website?
    I need an image to hover over that Hover effect and with a link to another page.
    Insert image = Ok
    Insert link in image = Ok
    Hover effect = Rollover. ūüôĀ
    That is what I need.
    Thank¬īs!

    marklchaves
    Participant
    Post count: 337

    Yes. Anything is possible.

    I just answered this same question recently. In this same forum (maybe do a search first before posting).

    https://theme-fusion.com/forums/topic/image-hover-image-goes-lighter/#post-657033

    Here’s my code for creating an on hover image rollover.

    https://codepen.io/marklchaves/pen/GRKVqqG

    Here’s how you make an image be a link.

    https://codepen.io/marklchaves/pen/YbWRvG

    You can apply custom CSS in many places these days in Avada (up to five places last time I counted).

    https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

    CLYON
    Participant
    Post count: 2

    Hello! Thanks for answering.

    First, if I searched the forum for what I need, and the css code is clear to me. The problem is that I don’t solve this issue.

    The problem is that in the image it says insert CSS:
    “CSS Class Add a class to the wrapping HTML element.”

    But it does not assign that Class to the image, but to the <span> tag before the image and does not have the desired hover effect in the picture.

    I would have to edit the template code and insert the class in the instruction

    Keep investigating!

    Thanks for your help.

    marklchaves
    Participant
    Post count: 337

    Hello Clyon,

    Here’s a demo using Avada Fusion Builder based on my code on CodePen. It took me about 5 minutes to create this.

    https://marklchaves.com/on-hover-image-overlay/

    You’ll see that adding my on-hover class to the <span></span> is not an issue.

    Good luck!

    • This reply was modified 4 days, 16 hours ago by  marklchaves.
Viewing 4 posts - 1 through 4 (of 4 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.