Illustratr theme – Removing mouse-over box from portfolio page

spleencoffin · Member · Jan 7, 2015 at 8:39 pm
Copy link

Add topic to favorites
I’m using the Illustratr theme with customization, and I’d like to remove the hover boxes with a plus sign that appear on the portfolio page. Is there any way to do this using a custom css code?

Thanks for any help you can provide!

The blog I need help with is: (visible only to logged in users)

nizamilputra · Member · Jan 7, 2015 at 9:06 pm

Sure, try to use this css;

.portfolio-thumbnail a:before,
.portfolio-thumbnail a:after{
  display: none;
}

spleencoffin · Member · Jan 7, 2015 at 9:32 pm
Copy link
Awesome, that worked! Is there any way to remove the grey box without also removing the greying out of the featured image that happens when you mouse over it?

nizamilputra · Member · Jan 7, 2015 at 9:48 pm

You also want to remove greying out featured image? Try to use this;

.portfolio-thumbnail a:hover img,
.portfolio-thumbnail a:focus img,
.portfolio-thumbnail a:active img {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	filter: grayscale(0%);
}

spleencoffin · Member · Jan 7, 2015 at 9:52 pm
Copy link
The code you posted previously removed the greyed-out feature image. I wanted to keep the greyed-out featured image but remove the box with the plus sign. The previous code removed both.
nizamilputra · Member · Jan 7, 2015 at 9:56 pm
Copy link
Oops, sorry. So remove my last css. It should be keep greying out when featured image is hovered.
spleencoffin · Member · Jan 7, 2015 at 9:59 pm
Copy link
I’m using the code below, but the featured image is not greying out when hovered over.

.portfolio-thumbnail a:before,
.portfolio-thumbnail a:after{
display: none;
}
nizamilputra · Member · Jan 7, 2015 at 10:03 pm
Copy link
It should be keep greying out when hovered over. I try it in my chrome browser it still greying out. http://awesomescreenshot.com/01245eie88 (look the left image).

What browser do you use?
spleencoffin · Member · Jan 7, 2015 at 10:16 pm
Copy link
Firefox. Hmm, maybe I need to empty cache?
spleencoffin · Member · Jan 7, 2015 at 10:20 pm
Copy link
It only seems to work in Chrome. Firefox and IE aren’t show the greying out for some reason. I tried emptying the cache.
nizamilputra · Member · Jan 7, 2015 at 10:47 pm
Copy link
I’m afraid your firefox doesn’t support css filter. I use FF 34, and can’t see greying out featured image. http://caniuse.com/#feat=css-filters
spleencoffin · Member · Jan 7, 2015 at 10:54 pm
Copy link
Oh, okay. That makes sense. Looks like Firefox will support it in the next update for FF 35. Thank you!
meillen7 · Member · Jan 9, 2015 at 2:13 am
Copy link
I have a similar question. How do I remove the plus sign hover boxes from gallery entries? It looks like this code is just for the portfolio page. My site is http://www.aphelandra.me.

Thanks in advance!
nizamilputra · Member · Jan 9, 2015 at 2:34 am
Copy link
Hi meillen7, here the css to remove grey background and plus sign in your website;
```
.gallery-icon a:before,
.gallery-icon a:after{
  display: none;
}
```
I hope it will helps you.
meillen7 · Member · Jan 9, 2015 at 4:00 am
Copy link
Thanks! It works perfectly.

The topic ‘Illustratr theme – Removing mouse-over box from portfolio page’ is closed to new replies.

WordPress.com forums

Illustratr theme – Removing mouse-over box from portfolio page