tgray87

That code works great. And just to let you know, might get an awesome job based on the site, so thanks again for the template 🙂

And yes, haha, I did copy the entire stylesheet :p

Kathryn, thank you for providing that info.

moddersnuit, I just want to say “Thanks” for asking the question and providing your solution! It’s a very cool effect having the image color appear upon hovering mouse.

One question – There’s code which converts the image to grayscale whithin the original style sheet.

.hentry.has-post-thumbnail:hover .attachment-boardwalk-featured-image {
	-webkit-transform: translate(-50%, -50%) scale(1.02);
	-moz-transform:    translate(-50%, -50%) scale(1.02);
	transform:         translate(-50%, -50%) scale(1.02);
	-webkit-filter: grayscale(100%);
	-moz-filter:    grayscale(100%);
	-ms-filter:     grayscale(100%);
	-o-filter:      grayscale(100%);
	filter:         grayscale(100%);

If I understand correctly (it should be said, I’m a total noob), the default theme css basically has it so that upon mouse hover, the image is made grayscale and then a color is applied over it. When the color is missing or its opacity is set to 0, the images look gray upon hover. When I deleted the last five lines of that code, the image was colored when I hovered over it.

How can I make the image grayscale to start, then upon hovering it becomes colorized? As it is, I just did:

.hentry.color-1.has-post-thumbnail .entry-link {
background-color: #000;
opacity: 0.6;
}

It still looks pretty damn good to me 🙂 But black and white rather than simply dark would be better.