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

awesomeblogger
(@awesomeblogger)

3 years, 5 months ago

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)

(@askel45)

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)

3 years, 4 months ago

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.