Formidable Forms – CSS Isolation Demo

This demo was created using Formidable Forms and CSS only hover styles to create an isolation style hover effect. This demo uses 3 sign-up forms but could also be applied to ‘sections’ within a form.

Demo - Isolation CSS Style

Section 1

Section 2

Section 3

The Code

/* CSS Isolation Style */

.hoverMeDemo {
    padding: 20px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    -o-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    position: relative;
    -webkit-transition: transform .2s linear,-webkit-box-shadow .2s linear, background-color .2s ease-in-out;
    -moz-transition: transform .2s linear,-moz-box-shadow .2s linear, background-color .2s ease-in-out;
    transition: transform .2s linear,box-shadow .2s linear, background-color .2s ease-in-out;
}

.hoverMeDemo:hover {
    transform: scale(1.05) !important;
    -webkit-transform: scale(1.05) !important;
    box-shadow: 0 17px 25px rgba(0,0,0,0.13) !important;
    -webkit-box-shadow: 0 17px 25px rgba(0,0,0,0.13);
    -moz-box-shadow: 0 17px 25px rgba(0,0,0,0.13);
    -o-box-shadow: 0 17px 25px rgba(0,0,0,0.13);
    background-color: #ffffff;
    opacity: 1;
    filter: none;
    z-index: 999999;
}

Add the class hoverMeDemo to your Formidable Form Sections in the CSS section or via the ‘Customise HTML’ section to the parent div element. Then add the CSS above to your theme or in the ‘Styles > Custom CSS’ section of Formidable.

Still have questions?

Still have questions or not sure where to start? Use our quick contact to ask us a question.

Start Planning

If you’re ready to get started click here to complete our Project Planner.

You may also like…

File Upload FolderFormidableTutorials
26 Mar 2019

File Upload Folder: Formidable Forms

Formidable Forms: File Upload Folder Changing the File Upload Folder used with the Formidable Forms File Upload element can be…
Invoicing SystemFormidableTutorials
26 Mar 2019

Create an Invoicing system: Formidable Forms

Create an Invoicing system: Formidable Forms In this guide you'll learn how to use Formidable Forms Pro to create an…
Share a form entryFormidableTutorials
26 Mar 2019

Share a form entry between users

Share a form entry between multiple users: Formidable Forms There may come a point where multiple users may need to…