Thank you for explaining. Sometimes it’s so hard to dig in someone else’s code.
One gets to lazy or tired and take the easy road. !important, It feels like cheating.
But you learn as you go along. Using !important has to be avoided. That’s clear to me now.
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.
tgray87 – Try adding this to your child theme to turn the initial images B&W:
.hentry.has-post-thumbnail .attachment-boardwalk-featured-image {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
One thing I noticed about your child theme’s CSS – is it possible you copied over the entire stylesheet from the parent theme, instead of just the styles you’re tweaking?
Usually in a child theme, we pull in the parent theme’s styles automatically, using the enqueuing method in functions.php or sometimes using the older @import method. By doing that, you only need to put the styles you’re overriding in the child theme’s style.css, and the file is much shorter.
Here are some good guides to child themes:
http://codex.wordpress.org/Child_Themes
http://op111.net/53/
http://vimeo.com/39023468
Just let me know if you have any other questions – feel free to start a new thread, since this one is already marked as resolved, and the original issue has been sorted out. Thanks!
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
tgray87 – good luck with the job!
