We're merging with GenerateBlocks! Learn more here.

[Support request] A bit of CSS to achieve the effect

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support A bit of CSS to achieve the effect

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #27860
    Milo Lam
    Participant

    Hi I wanted to create my carousel to look a bit like this on hover:
    https://prnt.sc/10htq17

    The container inside shifts up a little bit upon hover.

    It should be similar to the effect found on Carousel – Overlay Card demo but I wasn’t sure how to achieve either of the effects on CSS.

    Thank yoú

    #27862
    Milo Lam
    Participant
    #27892
    elvin
    Moderator

    Hi Milo,

    Any chance you can link us to the page w/ WPSP in question so we could inspect and help with the CSS write up?

    You can send us the link on the contact us page if you wish to keep it private: https://wpshowposts.com/contact/

    #27899
    Milo Lam
    Participant

    Just sent via the contact form. Thank you!

    #27903
    elvin
    Moderator

    Thanks.

    I’ve checked your site, and to be frank, this is outside of our scope of support as you’re asking us to do effects for the Flickity slider, which is a third-party plugin.

    But to help you out and point you in a direction, the main CSS effect involved with the overlay hover animation is this one.

    https://gist.github.com/ejcabquina/0ab471e36275deb26297c84397243ebf

    I’m not sure how best to apply this on your carousel as your site isn’t using WPSP. It’s best to ask its developer about this.

    #27908
    Milo Lam
    Participant

    Hi elvin,
    Sorry that site should be my old one that I’m trying to replicate. Please refer to the same site and add “staging” at the front as subdomain. the staging site should have WPSP. Also, I tried your CSS but it didn’t work :/

    #27931
    elvin
    Moderator

    Ah alright.

    Do you want it to behave like this? https://share.getcloudapp.com/04uJjw96

    If so, add this CSS:

    https://gist.github.com/ejcabquina/8ff18b4c23beaef9e1550b16291bd4b7

    #27940
    Milo Lam
    Participant

    That works! Thanks a lot! You have been very helpful

    #28022
    elvin
    Moderator

    Nice one. Glad it works for you. No problem. 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.