Mouseover blog efect

I believe something like that would require some custom javascript.

There might be some tutorials out there that lay out the necessary HTML/CSS/JS. If you can find that, I might be able to help you integrate it with GP.

No need such a difficult effect. Only some nice CSS is sufficient. If someone knows some...
Now using only:

.post-image:hover img {
opacity: 0.5;
}

Effect with blog title on hover would be nice, so I can hide the blog titles and use only featured images on blog page...

Thanx

You could do something like this:

.inside-article {
    position:  relative;
}

.post-image + .entry-header {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.post-image:hover + .entry-header {
    opacity: 1;
    pointer-events: none;
}

Then you can style it better by adjusting the font size, top and left position, and making your images full width within their containers.

Great, works perfect. Thanx a lot.
One more thing, image hover effect will disappear if I hover entry title. How can I adjust that ?
Can't find the right selector for "entry-header:hover" to set ".post-image img" properties...

Try the adjusted CSS above.

What an easy way if You know where to touch, perfect.

Awesome :)

Hi Tom,

Is there any way to align the text in the center?

https://snipboard.io/0iDKpW.jpg

Hi there,

edit the second block of CSS to this:

.post-image + .entry-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    transition: opacity 500ms ease-in-out;
    opacity: 0;
}

Excellent, Worked like a charm. Thank you Mr.David.

Is there any way to add a black overlay over the image? so that the text will look brighter.

https://snipboard.io/iXtgK8.jpg

Might be best if you raise a new topic where you can share a link to your site - we can provide a different lot of CSS