thumbnail overlays

[macrenshaw]

I’m trying to remove the red overlay on the thumbnail images when I hover over them while keeping the zoom on hover effect. I’ve tried to remove it but I seem to only be able to remove the white arrow, which I want to keep and alter its color if possible. Thank you for your help.
Cheers,

Matthew Crenshaw

site: dev.macrenshaw.com

[Swift Ideas – Ed]

Hi Matthew,

Try the following custom css:

figure {
background: transparent!important;
}

Hope that helps!

– Ed

[macrenshaw]

Thanks for the weekend reply, it is appreciated. It didn’t do anything. So if you have any other options that would be great. Also I was wondering if instead of making it transparent could I just comment it out in the css file? And if so would you know the name of the class and then Ill just do a search and see if I can find it.

Cheers.
Matthew

[macrenshaw]

Here is what I’ve tried so far…
I could get rid of the overlay completely along with the arrow by doing this:

figure .overlay {
display: none;
}

I could not however change the color or transparency.

But when I did this by accident

figure.overlay{
width: auto !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}

I got rid of the blue overlay and the arrow was pushed to the left side of the thumbnail. But I have no idea what happened to the blue overlay nor why the arrow was pushed to the left.This was done by accident.

[Melanie – SUPPORT]

Hi, I don’t see any overlay anymore, and the zoom still works, have you fixed it yourself?

[macrenshaw]

No I haven’t. I was wondering if it was possible to keep the arrow? I’ll turn the overlay back on.
Sorry about that.

[Melanie – SUPPORT]

Hm, does this work?

figure .overlay {
background-color: rgba(0,0,0,0)!important;
}

[macrenshaw]

It didn’t work.

[macrenshaw]

So the hover overlay opacity is controlled by this:

figure:hover > a > .overlay {
	opacity: 0.1;
	-moz-opacity: 0.7;
	filter:alpha(opacity=60);
	margin-top: -1.6px; /* GAP FIX */
	padding-bottom: 1.6px; /* GAP FIX */

But it seems to effect the arrow as well as the colored overlay. I haven’t been able to figure out how to separate them yet. The values in the code are just things I was using to test it out.

site: dev.macrenshaw.com

[macrenshaw]

I moved my site over to the main domain now.
new url: http://www.macrenshaw.com

[laranz – SUPPORT]

Hi,

Sorry for a late response. Did you try this?

figure .overlay { display: none; }

If that didn’t work, try this.

figure .overlay { display: none !important; }

Let me know, what you got.

Thanks,
laranz.

[Melanie – SUPPORT]

I’ll ask the developer

[Swift Ideas – Ed]

Hi @macrenshaw –

Give this a go:

figure .overlay {
background: transparent!important;
}

That will definitely sort it.

– Ed

[macrenshaw]

That didn’t seem to work. But it’s okay. I just reduced the opacity to something that I like and adjusted the color. So no worries. But thank you for all of y’alls assistance on every question asked.

[Swift Ideas – Ed]

Glad you found a solution 🙂

– Ed