How can I make a field float effect as a person hovers across it?

  • I would like to create an effect so that the field “flies up”, it almost looks like its floating, when a person hovers around the field.

    Example: https://www.smartpassiveincome.com/resources/
    Any of the boxes on this page.

    How can I do this? Do I need to add a custom CSS for every form? Is there a plugin for this? Do I need to add this CSS in the post, use a shortcode, or in the CSS Customization field?

    I am using GeneratePress.

Viewing 2 replies - 1 through 2 (of 2 total)

  • It is better to share your site link so you can be assisted. But try this CSS

    body:not(.single-post):not(.page):not(.error404) .inside-article {
    -webkit-box-shadow: 0 40px 100px rgba(82,109,122,.18);
    box-shadow: 0 40px 100px rgba(82,109,122,.18);
    -webkit-transition: all .2s ease-in;
    transition: all ease-in-out .3s;
}

body:not(.single-post):not(.page):not(.error404) .inside-article:hover {
    box-shadow: 0 40px 100px rgba(82,109,122,.18);
    transform: translate(0,-10px);}
    Thread Starter awesomeblogger

    (@awesomeblogger)

    Thank you @askel45, that helps greatly!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How can I make a field float effect as a person hovers across it?’ is closed to new replies.