Animation on hover?

Home › Forums › Jevelin Theme › Animation on hover?

Home › Forums › Jevelin Theme › Animation on hover?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    NOT RESOLVED Posts

  • dereksieb
    Participant

    Hello,

     

    Is it possible to make a column animate on hover? I see where you can set animations for when the page loads. But I’m wanting certain elements of my page to only animate when you hover over it. Is this possible?

     

    Thank you,

    Derek

    Shufflehound Support
    Moderator

    Hi Derek,

     

    Thank you for your question.

     

    You can set a different background image on hover for column as shown in the attached screenshots.

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    dereksieb
    Participant

    I’m talking about the slight hover animation on your demo page here: https://jevelin.shufflehound.com/hello/

     

    When you hover over your demos, (Education, Startup, Construction, etc..), your images slightly move up and a shadow appears around it.

     

    I really love this feature; it’s one of the main reasons I bought your theme.

     

    Can you please tell me how I can recreate that?

     

    I will include the link to my page I want this feature on in the private info field.

     

    Thanks,

    Derek

    Shufflehound Support
    Moderator

    That effect is created using below custom CSS code.

    #demos .vc_col-sm-4:hover {
    top: -6px;
}

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column:hover {
    top: -6px;
}
.sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column {
    transition: 0.3s all ease;
    top: 0;
}

    dereksieb
    Participant

    Thank you very much! And how do I add this effect to other elements of my website?

    Do I replace the ” .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column ” portion of the code you supplied above with whatever id or class I’m trying to add the effect to?

    Shufflehound Support
    Moderator

    Do I replace the ” .sh-section-e0edcd87dce567c226265b76cdd05646 .sh-column ” portion of the code you supplied above with whatever id or class I’m trying to add the effect to?

    Yes

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)