[Support request] Customize card

Hi there,

You can modify the animation of overlay style 2 with this cSS:

@media (min-width: 769px){
    .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover .wpsp-content-wrap {
        opacity: 1;
        transform: translate3d(0,0,0);
    }

    .wpsp-overlay.wpsp-ov-style-two .wpsp-content-wrap {
        opacity: 0;
        transform: translate3d(-3em,0,0);
        transition: all .3s cubic-bezier(.33,.66,.66,1);
    }
}

Change the value of translate3d on .wpsp-overlay.wpsp-ov-style-two .wpsp-content-wrap to change direction.

If you want to remove the slight bob-down movement on hover, you can add this as well.

.wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    transform: translateY(0em);
}

Is there a way to make an effect so the overlay appear as a slide?. I try your code and the effect (modifyng translate3d) affects only on the text, but not the overlay (.wp-show-posts-image-overlay). So I starting to play with that overlay, but still can’t do it.

By default, the overlay is applied to this selector. .wp-show-posts-image-overlay

You can remove the overlay on the image and apply a background color property to the image I’ve provided, effectively transferring the overlay so it moves along. 😀

I also was interested about adding a metafield on that wpsp-content-wrap div, similar to overlay style 1. Is it possible?

You’ll have to hook it in.

There’s a list of hook on my reply here –
https://wpshowposts.com/support/topic/bbpress-metadata-and-dates-in-wpshowposts/#post-28854

You can use wpsp_before_header hook as long as the priority value is >15.
You can use wpsp_after_content hook as long as the priority value is <15.

You can use these hooks as well.

wpsp_before_title
wpsp_before_content
wpsp_after_title