Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 25, 2021 at 12:48 am #1312131
    Dommel

    Hi,

    On images that have a link, and so become a button.
    When you set Image Hover Effect to “slightly zoom in”.
    Is it possible to either adjust the zoom-in amount and/or to adjust the zoom-in anker point. Currently it zooms in in the center. Perhaps it’s possible to say that the zoom-in center/anker is on the left or a corner?

    Thank you!

    Regards,
    Robert

    July 27, 2021 at 9:13 am #1312650
    Ismael

    Hey Dommel,

    Thank you for the inquiry.

    We could apply the transform-origin property to adjust the zoom effect.

    .avia-image-container.av-hover-grow img:hover, .avia-image-container.av-hover-grow .avia-image-overlay-wrap:hover {
    transform-origin: top right;
}

    For more info, please check this documentation.

    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

    Best regards,
    Ismael

    July 27, 2021 at 8:02 pm #1312845
    Dommel

    Hi Ismael,

    Ah yes, very cool!
    How can I then say that this should only be applied to certain buttons, either using the ID function.
    Or for example to an entire page, or only a color section. I see this done in many other solutions, but I’m not really sure how this works.

    I believe for using the ID way, you need to add a #IDName somewhere in that first line?

    July 30, 2021 at 4:35 am #1313362
    Rikard

    Hi Robert,

    If you explain a bit further where you want to apply this, then we can give you example CSS to try out. Also please post a link to where we can see the element in question.

    Best regards,
    Rikard

    July 30, 2021 at 11:01 am #1313420
    Dommel

    Hi there,

    Sure, here we go.

    See this page: https://highpriority.com/content/
    Notice the yellow horizontal buttons. These are the images with links. I already tested the above suggest code, and it works good.
    However, when I apply it to the website (quick CSS), it is applied to all image buttons. Some of which are on the main page (https://highpriority.com/).
    We only want the effect to be on the long horizontal buttons (images with link). Most of them are on that page, some of them are on the home page too.

    In other words, how can we say that only those buttons are affect, but all other remain “normal” with a zoom-in from the center. Using the element ID system would be fine I think. Unless you see a better way.

    Thanks for taking the time,
    Robert

    August 2, 2021 at 4:06 am #1313782
    Rikard

    Hi Robert,

    If you want to apply this CSS to more than one element, and on multiple pages, then it would be better if you assigned a class to the image elements. After that you should be able to target them using CSS like this:

    .your-custom-class img:hover {
    transform-origin: top right;
}

    If you want to try to target the images on the page you linked to, then please try this out instead:

    #HoverZoomLeft img:hover {
    transform-origin: top right;
}

    Best regards,
    Rikard

    August 5, 2021 at 1:49 pm #1314664
    Dommel

    Hi there,

    Thanks. There is an issue though where when I use your suggested code. For some reason the anker point (where it zooms) is not fully at the left of the image. Here is the applied code:

    .imageHoverZoomLeftClass img:hover {
    transform-origin: 0% 50%;
}

    For an example, please visit: https://highpriority.com/content/
    The “beginners guide to sketching” has this code applied. The others do not, and so zoom to the center.
    I also tied using transform-origin: left center; But it has the same effect not not being truly at the left.

    • This reply was modified 3 years, 4 months ago by Dommel.
    August 8, 2021 at 11:50 am #1315110
    Mike

    Hi,
    Thank you for your patience, please note that Ismael’s code had two rules, for this effect to work correctly you will need to use both rules, so based on the page you linked to your custom class is imageHoverZoomLeft so the correct css is:

    .imageHoverZoomLeft.av-hover-grow img:hover, .imageHoverZoomLeft.av-hover-grow .avia-image-overlay-wrap:hover {
    transform-origin: left;
}

    I created a test page to show this works correctly, linked below.
    I also notice that many of these buttons on your page have the custom class with a dot .imageHoverZoomLeft please do not include the dot in the custom class field.

    Best regards,
    Mike

    August 8, 2021 at 6:49 pm #1315128
    Dommel

    Perfect, it works.
    I have still much to learn on how CSS works in it’s fundamentals.

    Thank you so much!

    Edit: also, great catch on the dot! I will remove from as you mentioned.

    August 8, 2021 at 6:56 pm #1315130
    Dommel

    As a feature request. For the Image Hover effect. Currently it has two options:
    – Yes, Slightly zoom the image
    – Yes, Slightly increase the image size

    It would be a great addition if a regular fade out and/or grey out option would be there.

    August 8, 2021 at 7:49 pm #1315136
    Mike

    Hi,
    Glad this helped, I also forward the feature request for the dev team to review. Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    August 8, 2021 at 9:09 pm #1315156
    Dommel

    Thanks. Yes please, it can be closed :)

    August 8, 2021 at 11:15 pm #1315171
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Image with link. Hover zoom in center on the left instead of center’ is closed to new replies.