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.
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 {
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.
