I'm making a hover effect on my website, where you hover images (pngs) and they grow in size. The problem i have is that they now get blurry when they resize.
The code that I'm using looks something like this:
.div {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,1px);
transform: perspective(1000px) translate3d(0,0,0);
}
.div:hover {
-webkit-transform: perspective(100px) translate3d(0,0,1px);
transform: perspective(100px) translate3d(0,0,31px);
}
And you can see the effect on this jsfiddle: enter link description here
Is there a way to fix this?
I think scale would be more appropriate for this. This solution only blurs during scaling.