We're merging with GenerateBlocks! Learn more here.

[Support request] Customize card

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Customize card

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36343
    Guillermo
    Participant

    Hi, thanks in advance.

    Card overlay style 2 is almost what I’d like to do, but:

    – Is it possible to modify the hover effect on a card?

    Something like this

    – Is it possible to add on that overlay the category field?

    Thank you so much.

    #36345
    elvin
    Moderator

    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);
    }
    #36363
    Guillermo
    Participant

    Hi elvin, thanks for your reply.

    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.

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

    I hope is not much customizing but I can’t find the way of doing it.

    Thanks!

    #36376
    elvin
    Moderator

    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 
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.