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

    Hi,

    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?

    Cheers

    #175925

    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.

    http://imgur.com/delete/LRnEpEUUutYe0wR

    Any suggsestions woul be very welcome..

    #175976

    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?

    thx

    #176163

    Hey!

    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,
    Ismael

    #177361

    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!!!

    P.S.
    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)

    http://i.imgur.com/6mTCRPY.png

    http://i.imgur.com/6mTCRPY.png

    • This reply was modified 9 months, 1 week ago by  Adenadoume.
    • This reply was modified 9 months, 1 week ago by  Adenadoume.
    #177710

    Hey!

    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.

    Regards,
    Ismael

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.