Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #175514


    Am trying to use a custom image to appear on hover when inserting an image with avia builder.

    When I insert my own images with hover they are not responsive – I woul like to keep the responsive behaviour of the avia_image

    Here’s my apporach so far:

    Have removed the image hover effects from js/avia.js

    I use a custom class for each image I insert so I can target each image in my css

    e.g. .avia_image.imagecustomclass img:hover

    I can add hover effects like custom icon, change color, opacity etc but cannot replace the image.

    Could you tell me if am approaching this correctly, or maybe try javascript onmouseover?



    OK so I had some success..
    In the avia builder I select a transparent png image then I assign a custom class

    In my Css I use background image and indeed it works, so I have one image for normal state and one for hover.

    BUT…. there is a scaling problem especially when screen goes inbetween 768-989 pixels:

    The images are not centered or scaled correctly

    I attach a screenshot where the first 2 rows have my images and the last is a normal image from avia builder.

    Any suggsestions woul be very welcome..


    OK I think I might be very close… in two column layout images are aligned

    So my final (I hope) question is: How can I force a 3 column layout to become 2 columns using @media for screens min768 max989 pixels?




    We need to see the actual website. How did you add the 3 column image? Can you please elaborate the steps that you did? You add the style inside this media query:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    /* Add your Styles here */

    Best regards,


    thx for the reply, site is not live and since I have a deadline till Monday so am still trying different approaches

    My FINAL approach which gives me EXACTLY the results I want is usng product grid and show only image + hover via custom css class.

    WHAT I NEED is to replace link & URL of these “products” so they be used as images that link to pages

    Thank you in advance!!!

    If you have a better/faster approach please advise, I include Layotut of main page (3 column Layout, images lead to pages, with different image on hover)

    • This reply was modified 4 years, 1 month ago by  Adenadoume.


    It is not possible to direct the link of the product grid manually. They will always link to the product pages. Enfold 2.4 will be release soon and I think the masonry gallery layout will be available on the theme.


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Avia image hover -> use own images for hover state’ is closed to new replies.