Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 15, 2013 at 9:06 am #175514
    Adenadoume

    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

    October 15, 2013 at 4:16 pm #175925
    Adenadoume

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

    October 15, 2013 at 5:49 pm #175976
    Adenadoume

    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

    October 16, 2013 at 4:38 am #176163
    Ismael

    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

    October 18, 2013 at 1:18 pm #177361
    Adenadoume

    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 11 years, 2 months ago by Adenadoume.
    October 19, 2013 at 5:10 am #177710
    Ismael

    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

  • Author
    Posts
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.