Skip to main content

CSS Isolation Demo

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 {
    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.05) !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);
    opacity: 1;
    filter: none;
}