This demo was created using CSS only grow / hover styles to create an isolation style hover effect. This demo uses 3 pricing tables but could also be applied in many other scenarios like sections within a form.

Option 1

a good starter option

  • List Item 1
  • List Item 2
  • List Item 3
Sign Up

Option 2

a much better option

  • List Item 1
  • List Item 2
  • List Item 3
Sign Up

Option 3

the ultimate option

  • List Item 1
  • List Item 2
  • List Item 3
Sign Up

The Code


/* CSS Isolation Style */

.Options {
    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;
}

.Options:hover {
    transform: scale(1.1) !important;
    -webkit-transform: scale(1.1) !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: #fff;
    opacity: 1;
    filter: none;
}

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…