grayscale-to-colour effect on thumbnails

  • Resolved zetpe

    (@zetpe)


    8 years ago

    Hi everyone!
    I would like to create a grayscale-to-colour effect on the thumbnail images.

    I found an easy-looking solution and tried to implement it:

    .attachment-boardwalk-featured-image {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

    The part above works fine. The filter is applied on the “idle” state images.

    
.attachment-boardwalk-featured-image:hover  {
 filter: none;
 -webkit-filter: none;
}

    On “hover”, however, the greyscale filter stays always active regardless of the “filter: none;”.

    Correct me if I am wrong (I am a CSS beginner), but I have been playing around with this issue for a few hours, and came to the conclusion that there must be some “on-hover” filter declared in a different class which I cannot locate.

    I did not make too many “additional CSS” changes apart from the filter above and the two below. I wanted to get rid of the “on-hover” blueish/greenish background color.(I am adding these in case they have anything to do with the images): 

      
.entry-link {
background: transparent;
	
}

.hentry.has-post-thumbnail .entry-link {
	background: transparent;
	
}

    So how can I get the grayscale-to-colour effect to work?
    the website URL is: https://norwen.pe.hu
    Thanks in advance,

    Marcin

    • This topic was modified 8 years ago by zetpe. Reason: added site url
    • This topic was modified 8 years ago by zetpe.
    • This topic was modified 8 years ago by zetpe.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Marcin ??

    Kathryn and I put our heads together, and here’s what we came up with:

    .attachment-boardwalk-featured-image {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
article:hover .attachment-boardwalk-featured-image {
    filter: none !important;
    -webkit-filter: none !important;
}

    The problem was that there are other things on top of the image, so you weren’t hovering directly on it. There’s something else making the important classification necessary, which I’d hoped to be able to remove, but this should do the trick ??

    Thread Starter zetpe

    (@zetpe)

    Chad, Kathryn,
    You guys are beautiful people!
    Thank you very much! Your solution works just fine ??

    Have a good one!

    You’re welcome! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘grayscale-to-colour effect on thumbnails’ is closed to new replies.

Tags