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