Home › Forums › Pro Support › Customize card
Tagged: card overlay
- This topic has 3 replies, 2 voices, and was last updated 1 year, 8 months ago by
elvin.
-
AuthorPosts
-
January 12, 2022 at 12:00 pm #36343
Guillermo
ParticipantHi, 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.
January 12, 2022 at 4:48 pm #36345elvin
ModeratorHi 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); }
January 14, 2022 at 7:41 am #36363Guillermo
ParticipantHi 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!
January 16, 2022 at 8:07 pm #36376elvin
ModeratorIs 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-28854You can use
wpsp_before_header
hook as long as the priority value is >15.
You can usewpsp_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
-
AuthorPosts
- You must be logged in to reply to this topic.