Remove Grey Effect

I forgot to mention, I tried the solution from another forum post and it worked. But i still want to maintain that shadow effect where the image seems to pop forward because of the shadow. I still want that but without the image being grey. Is that possible?

But i still want to maintain that shadow effect where the image seems to pop forward because of the shadow.

I don’t know what your modification was to remove the grey overlay, but did you leave the thumb-shadow DIV intact in postformat.php?

I wasn’t able to do it. I must have marked “resolved”by accident. Do you have any idea on how to just get rid of the grey and maintain the frame with the shadow?

In posts.css, you want to change this:

.hentry:hover .thumb-shadow {
	background-position: center bottom;
}

to this:

.hentry .thumb-shadow {
	background-position: center bottom;
}

(i.e., you just remove the :hover from after .hentry. This will display the shadow under the thumbnail.

Then, also in posts.css, you want to comment out (or remove entirely) this section:

.post-thumb img.img_grayscale {
	filter: 					grayscale(100%); /* Current draft standard */
	-ms-filter: 			grayscale(100%);
	-o-filter: 				grayscale(100%); /* opera */
	filter: 					url("%tpldir%/images/gray-filter.svg#grayscale"); /* Firefox */
	filter: 					gray; /* IE */
	-webkit-filter: 		grayscale(1); /* Old WebKit */
	-webkit-filter: 		grayscale(100%); /* New WebKit */
}

What this does is set the top layer of the thumbnail (the img_grayscale layer) to gray, so we’ll just comment it out so the top image is color.

That is, the thumbnail is comprised of two identical images, one on top of another. The top layer is set to gray using the CSS above, and the opacity is initialized to 1, while the bottom image remains color, but the opacity is set to 0 so you can’t see it. When the mouse moves into the area of the post, there’s a JavaScript event handler which gradually changes the opacity of the top, gray image from 1 to 0 (making it clear), and the opacity of the bottom, color layer from 0 to 1 (so it becomes visible).

The only thing left is to add a line to your JQuery code in the Bottom field of your Head section (your code area is growing quite large, now). Add this line before the ending brace of the ready function:

$('.hentry').off("hover");

What this does is remove the previously mentioned event handler for when the mouse enters the post area, so it doesn’t try to animate the thumbnail transition.