[Resolved] Mouseover blog efect

[Radek]

Hi, any idea how add some nice mouseover efect to featured images on blog page set up to columns ? Something like here: http://www.toman-design.com
Without any pagebuilder please…
Thanx

[Tom]

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.

[Radek]

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

[Tom]

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.

[Radek]

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…

[Tom]

Try the adjusted CSS above.

[Radek]

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

[Tom]

Awesome 🙂

[Ram]

Hi Tom,

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

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

[David]

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;
}

[Ram]

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

[David]

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

[Author]

Posts