Instead of using scale you can consider a translateZ
with a perspective. Make sure to define the perspective initially to avoid the bad effect when moving the cursor fast:
.scalable{
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
transform:perspective(100px);
}
.scalable:hover {
transform:perspective(100px) translateZ(5px);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 20px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="card scalable">
<div>here's some description</div>
</div>
One idea to reduce the blur effect is to start from the negative translate and then get back to 0:
.scalable{
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
transform:perspective(100px) translateZ(-5px);
}
.scalable:hover {
transform:perspective(100px) translateZ(0px);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 25px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="card scalable">
<div>here's some description</div>
</div>