Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 1, 2015 at 3:58 am #437888
    happinessplunge

    Hello,

    When I hover my mouse over a linked image in Chrome, an ugly square appears for a second and then yields to a circle. You can see what I mean in this image:
    Image. The left side is when the mouse initially hovers, and the right side is when it snaps back to what it’s supposed to be.

    I have animation turned on and the square stays in place until the animation finishes, but the square happens whether or not the mouse hover effect is turned on.

    This does not occur in Firefox or Internet Explorer. Is there any CSS modification I can make to fix this?

    Here’s a link to the site if you need it.

    Thanks!

    May 4, 2015 at 2:15 pm #438883
    Yigit

    Hey happinessplunge!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .av-styling-circle .image-overlay {
  border-radius: 10000px;
}

    Regards,
    Yigit

    May 4, 2015 at 4:49 pm #439066
    happinessplunge

    Hi Yigit,

    Thanks so much for this. Great idea to push the border out as far as possible!

    However, below is a video showing the left image that still has the image hover effect enabled, and the right image where I turned it off. The CSS code worked, for the most part, for the image on the right with hover disabled. It isn’t pretty on the left with the image hover enabled.
    http://screencast.com/t/XScs5ZMJpXv

    I figured out how to disable the overlay entirely, but then with circular images there is a strange square that appears as the image grows, and then disappears after the animation is done. I tried making the image 180×180 instead of 300×300 and it still grew as a square. You can see the problem below:
    http://screencast.com/t/zpLiIjDjz81D

    Both of these issues are present in Chrome only, not Firefox.

    However, in both Chrome and Firefox, my sidebar items behave strangely when the mouse hovers over them. Upon the first hover, the transparency only covers a small fraction of the top of the image. Then, upon the second hover the image overlay appears as it should. Video here: http://screencast.com/t/Z9iGQJTf4U

    The site in question is http://testing123.happinessplunge.com

    Any thoughts on these strange hover issues mostly related to Chrome, but applying to Firefox as well in the last case?

    Thanks so much!

    May 7, 2015 at 10:17 pm #441276
    Josue

    Hi!

    Try adding this code to Quick CSS and see if it makes a difference:

    .av-hover-grow, .av-hover-grow img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

    Regarding the sidebar issue this will fix it:

    .widget span.image-overlay {
    top: 0 !important;
}
.widget br{
    display: none;
}

    Cheers!
    Josue

    May 7, 2015 at 10:35 pm #441285
    happinessplunge

    Perfect, I can’t thank you enough! Works great!

    May 7, 2015 at 10:59 pm #441296
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    January 9, 2016 at 7:42 pm #562475
    zamappano

    Hi,
    I have the same problem on my website on chrome with circular images.

    The problem is still visible on the site reported by “happinessplunge” link in the section “Happy Nomad Tour Links” (my site is visible only for administrator/editor because under development).

    The problem is not solved even by entering the class you reported.
    Do you have other tips about?

    Thank you
    Stefano

    January 9, 2016 at 8:57 pm #562489
    Josue

    Hi @zamappano!

    Please create a new thread for your issue, also include an access in private section.

    Regards,
    Josue

    August 11, 2016 at 3:34 pm #671385
    Sandy

    Josue’s fix worked for me :) Thanks.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Image mouse hover issues on Chrome’ is closed to new replies.