Remove link icon during hover on portfolio index page

[Priscilla]

Hello, I’ve managed to modify the ‘link’ icon that appears when hovering over a portfolio item on the Portfolio index page (adding a custom image and background colour), but the original icon still appears underneath the custom icon image. How can I get rid of this? I’ve read several of your articles (such as this one: https://theme.co/apex/forums/topic/hover-customization-recent-posts-thumbs-portfolio-thumbs-and-some-link-problems/), but cannot seem to find the answer to this specific case.

The portfolio item on hover looks like this:

My site URL is:
http://terracana.priscillathen.com/projects/

[ruenel]

Hello There,

Thanks for writing in! To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-portfolio .entry-thumb:before {
    background-color: transparent !important;
}

Hope this helps. Kindly let us know.

[Priscilla]

Oh wow, that worked! Thank you RueNel.

I wouldn’t have thought that the “link” icon would be considered as part of the background; would you mind explaining this? I’d like to understand the logic behind it.

Also, it seems to be a “cheat” trick, as it doesn’t actually remove the icon, but only hides it. If I wanted to actually remove it, how can this be done? (Just pure curiosity.)

[jade]

Hi there,

Please try:

.x-portfolio .entry-thumb:before {
    display: none;
}

Hope this helps.