Black line appearing when scrolling over images

  • Resolved katherinemasters

    (@katherinemasters)


    9 months, 3 weeks ago

    Hi,

    I am finding that when I scroll over the images in my website (that have a hover applied to them, with an active URL link associated) this strange black line appears under the image. I think it might have to do with the drop shadow I’ve placed there. I’m using Elementor for creating these elements.

    Any suggestions or quick shortcode fix to remove this black line without removing the original dropshadow would be greatly appreciated, thanks a lot. Katherine

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • In Appearance > Customize > Additional CSS add:

    figure.wp-caption a:hover {
    box-shadow: none;
}

    You may also check the settings for your image to remove the box shadow when hovered, you might need to contact Elementor Support: https://elementor.com/support/ to learn how to do that.

    Hi @katherinemasters

    @lizducos is right, it’s a compatibility issue between Elementor and Twenty Seventeen theme.

    You can easily fix it with the following CSS snippet though:

    /* Remove Image Underlining on Hover & Focus
 * https://www.ads-software.com/support/topic/black-line-appearing-when-scrolling-over-images/
 */

.entry-content .elementor-widget-image a:focus,
.entry-content .elementor-widget-image a:hover,
.entry-summary .elementor-widget-image a:focus,
.entry-summary .elementor-widget-image a:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

    This snippet will work both when images are hovered and when they are focused, and is limited to images added with Elementor in the posts/pages content and summary (those that are buggy). You can add this CSS snippet in the Additional CSS tab of the Customizer.

    Thread Starter katherinemasters

    (@katherinemasters)

    Brilliant, thanks so much Luk4 and Liz D!

    Thread Starter katherinemasters

    (@katherinemasters)

    Luk4 your code worked perfectly, thanks.

    You’re very welcome @katherinemasters ??

    Please, don’t forget to mark this topic as resolved. This helps the volunteers like me find the topics that still need attention. Thank you!

    [ Signature deleted ]

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Black line appearing when scrolling over images’ is closed to new replies.