CODEWITHSUNDEEP
css
que1326
que1326

Reputation: 2325

How to remove blur effect after scale transition?

Have a box with some text inside. When I hover it, I want to scale / zoom it bigger with an animation. When the animation ends, the blurred effect is removed from the container. Is there anyway to remove the blur effect after the transition ?

The Code (http://codepen.io/ptongalex/pen/dNZdmV):

.box {
  border: solid red 2px;
  width: 100px;
  position:relative;
  text-align:center;
  left: 50%;
  top:200px;
}
.box:hover {
  -webkit-filter: blur(0);
  -webkit-transform: translateZ(0);
  transform: scale(3);
  transition: transform 1s;
}
<div class='box'>
  <h1>Text</h1>
</div>

Upvotes: 2

Views: 8215

Answers (2)

sujithuix
sujithuix

Reputation: 264

This should work.

filter: none; 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

But in some cases the element will be blurred during animation if you use transition.

Upvotes: 1

TheYaXxE
TheYaXxE

Reputation: 4294

One solution could be to start you box as big and then have it scaled down to your desired size. When you then hover the box you scale it up to 1. This way you prevent the box and its content from being pixelated/blurry when scaling:

.box {
  border: solid red 6px;
  width: 300px;
  position:relative;
  text-align:center;
  font-size: 54px;
  transform: scale(0.33);
  margin: 0 auto;
  transition: transform 1s;
}
.box:hover {
  transform: scale(1);
}
<div class='box'>
  <h1>Text</h1>
</div>

Upvotes: 1

Related Questions