Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 17, 2016 at 2:59 pm #713600
    romano2

    Hello
    I’ve got a problem with roll-over on an image.
    The problem occurs only if I choose in Image Options “Yes raise the size on hover”.
    Under certain conditions, the overlay is not covering the whole image.
    overlay problem

    If I put the mouse on the image, then go out et go back on the image very fast, the overlay don’t show properly.
    For the overlay to work properly, I need to wait for the zoom effect to finish outside, and then re-enter. Otherwise there is this offset…
    It’s not clean, and my client don’t want such an imperfection.

    Have you got a tweak ? Or should I disable zoom effect (Which would be very frustrating) ?
    Thanks

    • This topic was modified 8 years ago by romano2.
    November 18, 2016 at 6:17 am #713848
    Rikard

    Hey romano2,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 18, 2016 at 10:30 am #713915
    romano2

    Of course :

    Collège Montaigne Lormont

    Not the first image, but the others.
    Thanks

    November 18, 2016 at 1:55 pm #713991
    Yigit

    Hi,

    I checked your page on Chrome and Firefox but could not reproduce the issue. Which browser and OS are you using?

    Best regards,
    Yigit

    November 18, 2016 at 2:21 pm #714014
    romano2

    Hi
    I’ve tested with :
    > Windows 10 – firefox, chrome, opera, edge, ie11
    > Windows 7 – firefox, ie
    > Mac OS X – firefox, chrome, safari

    On all this browser, there is the problem of overlay.
    You can see it in action on this video
    Take a look.
    Thanks

    November 21, 2016 at 6:36 am #714678
    Ismael

    Hi!

    I was able to reproduced the issue on Windows 7 and the only workaround I can think of is to cause the overlay to overflow outside the image container. Please add this in the Quick CSS field.

    .image-overlay .image-overlay-inside {
    left: auto;
    top: auto;
    right: 25%;
    bottom: 25%;
}

.avia_transform a:hover .image-overlay {
    min-width: 200% !important;
    min-height: 200% !important;
}

    Best regards,
    Ismael

    November 24, 2016 at 2:30 pm #716423
    romano2

    Hello
    In my case, this doesn’t work.
    But trying some css tricks, I found a solution which is ok for me :

    .avia_transform a:hover .image-overlay {
    left: 0 !important;
    top: 0 !important;
  }
.avia_transform a .image-overlay {
    left: 0 !important;
    top: 0 !important;
}

    However, do you know how I could reduce the zoom effect ?
    Thanks !

    November 28, 2016 at 5:19 am #717557
    Ismael

    Hi!

    Glad that you found a workaround.

    However, do you know how I could reduce the zoom effect ?

    You can decrease the scale value.

    .av-hover-grow:hover img {
    transform: scale(1.010);
}

    Default value is 1.025.

    Cheers!
    Ismael

    November 28, 2016 at 1:06 pm #717715
    romano2

    Thanks, it’s that.
    Have a good day !
    RESOLVED

    November 30, 2016 at 11:19 am #718685
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘image roll over overlay’ is closed to new replies.