CODEWITHSUNDEEP
htmlcss
ursalarose
ursalarose

Reputation: 47

Desaturation CSS effect void when thumbnail text is hovered over

I'm not sure if this is possible, but I'd like my thumbnail buttons to be desaturated when the text of the thumbnail is rolled over. Currently, I am calling my Wordpress post titles to appear when the Post Featured Image thumbnails are hovered over. When the thumbnail image itself is hovered over, the css effect works just fine. However, if I hover over the text of the thumbnail, the effect is broken. Is there a way around this?

 .article-preview-image img:hover {
   -webkit-filter: grayscale(100%) brightness(0.5);
   -moz-filter: grayscale(100%) brightness(0.5);
   -ms-filter: grayscale(100%) brightness(0.5);
   -o-filter: grayscale(100%) brightness(0.5);
   filter: grayscale(100%) brightness(0.5);
   -webkit-transition: all .4s;
   -moz-transition: all .4s;
   -ms-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;
 }
<figure class="article-preview-image">
  <a href="http://cks.whiterabbitstudio.us/tara-temple/">
    <img width="190" height="189" src="http://cks.whiterabbitstudio.us/wp-content/uploads/2015/10/tarathumb.jpg" />
  </a>
  <h1 class="title">
                <a href="http://cks.whiterabbitstudio.us/tara-temple/">Tara Temple</a>
            </h1>
</figure>

If this isn't possible with CSS, I'm open to using javascript, but I don't know where to look for a simple tutorial or snippet. I'm not very familiar with java.

Upvotes: 0

Views: 185

Answers (2)

Bert Peters
Bert Peters

Reputation: 1542

You are almost correct. Currently, you apply the effect to img:hover. Instead, you could apply it to an img located in a .article-preview-image:hover, like below.

img { /* Universal settings */
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}

.article-preview-image:hover img {
    /* When the article preview thing is being hovered, grayscale the image */
    -webkit-filter:grayscale(100%);
    -moz-filter:greyscale(100%);
    -ms-filter:greyscale(100%);
    -o-filter:greyscale(100%);
    filter:grayscale(100%);
}

Upvotes: 2

Karmacoma
Karmacoma

Reputation: 668

CSS solution:

   .article-preview-image:hover img {
    -webkit-filter:grayscale(100%);
    -moz-filter:greyscale(100%);
    -ms-filter:greyscale(100%);
    -o-filter:greyscale(100%);
    filter:grayscale(100%);
}

Upvotes: 1

Related Questions