How can i add hover effect on this post thumbnail

[rabbitrun978]

https://www.discovernauts.com/en/travel-guides

This is a site, i am working on. How can i add hover effect on the post thumbnail. When users hover over the post thumbnail, i want the image to darken and the title to turn light blue. Right now, i have added the hover effect on title hover, but i want to this to work as when users also hover over post thumbnail.

I want the hover effect post thumbnail have in https://www.discovernauts.com/en/ in https://www.discovernauts.com/en/travel-guides/

[rpkamp]

You’ll want to put a hover effect on the elements with class uael-post__inner-wrap

In pseudo CSS

.uael-post__inner-wrap [image] {
   [[ change color ]]
}

.uael-post__inner-wrap [text] {
   [[ change color ]]
}

Where [image] and [text] need to be replaced with the appropriate selectors to target them.

[PaulOB]

@rabbitrun978

I want the hover effect post thumbnail have in https://www.discovernauts.com/en/ in https://www.discovernauts.com/en/travel-guides/

That one uses a pseudo element shimmed over the image and use a partially opaque background to make the image appear darker. These days it would be easier to use the filter property instead.

e.g.

.uael-post__inner-wrap:hover .uael-post__content-wrap .uael-post__title a{
color:#4fc2ff;
}
.uael-post__inner-wrap:hover img {
filter: brightness(70%);
}