Change portfolio page hover direction

[nhook]

Hello,

I’m needing a bit of assistance figuring out how to change the direction of the hover effect on portfolio pages. Currently, it goes left to right. My client wants to see both one that is from bottom to top, and another that just appears on hover instead of having a sliding effect.

I’ve looked through some older posts, but nothing is really getting me where I need to go.

Thank you.

[ruenel]

Hello There,

Thanks for writing in!

You can make use of this custom css if you want to have from bottom to top:

.x-portfolio .entry-featured .entry-cover {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 100%;
}

.x-portfolio .entry-featured:hover .entry-cover {
    top: 0;
}

And to have the effect that will just appear on hover, you can make use of this:

.x-portfolio .entry-featured .entry-cover {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 0;
    opacity: 0;
}

.x-portfolio .entry-featured:hover .entry-cover {
    opacity: 1
}

We would loved to know if this has work for you. Thank you.

[nhook]

Hey @RueNel,

That is exactly what I needed. Thank you!

[john]

Hey,

You are welcome!