Black line appearing when scrolling over images

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://projectdmc.org/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.

Brilliant, thanks so much Luk4 and Liz D!

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!

— @luk4 × cyberia╱eu