Remove Link icon on search results featured image

Hi,
I don’t like link icon which shows when hovering over a featured image,
so I have used to following CSS code to remove it from the main blog menu and just change the image to have an opacity of 0.90, however, when searching, the icon is still showing.

.blog a.entry-thumb:hover:before {
opacity: 0 !important;
}
.blog a.entry-thumb:hover img {
opacity: 0.90 !important;
}
.search-results .entry-featured a:hover:before {
display: none;
opacity: 0.50; 
}

also is there a way to remove the link text when highlighting over links?
its currently showing “Permalink To:[blog post name]”
edit: I’m wondering if the permalink to the issue should be dedicated to a whole new post as I would want it removed from all links.

many thanks.

Hi Sean,

Thanks for reaching out.

The CSS will only work to where it’s applied, for example, on your blog page. To make it work to another page, you’ll have to apply it there too, example for the search results

.blog a.entry-thumb:hover:before,
.search-results a.entry-thumb:hover:before {
opacity: 0 !important;
}
.blog a.entry-thumb:hover img,
.search-results a.entry-thumb:hover img  {
opacity: 0.90 !important;
}

As for the permalink, please add this code to Theme Options > JS

jQuery('.entry-title a').removeAttr('title');

Hope this helps.

1 Like

Hi,
Thanks for your reply that does resolve my first problem with the link icon.

The second problem with permalinks, this has now been removed from the blog titles, but not when hovering over the feature image, do you know the js to remove it from the feature image too?

many thanks.

Hey @seanlincoln,

For the featured image, the JS is:

jQuery('.entry-featured a').removeAttr('title');

Hope that helps.

1 Like

This all now works great!
i have noticed the feature image of posts for the category/archive are still showing the link icon when hover,
can this be removed too?

http://www.fm-society.com/football-manager-2019/

Hi @seanlincoln,

To remove it, you can add the code below in Theme Options > CSS

a.entry-thumb:before {
    display:none;
}

a.entry-thumb:hover img {
    opacity: 1;
}

Hope that helps

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.