Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #437888

    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!

    #438883

    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

    #439066

    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!

    #441276

    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

    #441285

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

    #441296

    You are welcome, glad to help :)

    Regards,
    Josue

    #562475

    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

    #562489

    Hi @zamappano!

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

    Regards,
    Josue

    #671385

    Josue’s fix worked for me :) Thanks.

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