CSS - Blurry image/text when rezising

Question

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?

Maybe helpful: [WebKit: Blurry text with css scale + translate3d](http://stackoverflow.com/q/8024061/1456376) and [Webkit-based blurry/distorted text post-animation via translate3d](http://stackoverflow.com/q/6411361/1456376) — insertusernamehere, Jun 24 '15 at 16:33
If you want to grow the size of the image why donr you use scale? Why using perspective? — Anirudh Modi, Jun 24 '15 at 16:36

score 3 · Accepted Answer · answered Jun 24 '15 at 16:47

3

I think scale would be more appropriate for this. This solution only blurs during scaling.

.square {
  width:100px;
  height: 100px;
  background-color:black;
  margin: 50px;
}
p {
  color:white;
  text-align: center;
  padding-top: 35px;
}
.square {
  -webkit-transition: -moz-transform .3s ease-out; 
  -moz-transition: -webkit-transform .3s ease-out; 
  -o-transition: -o-transform .3s ease-out; 
  transition: transform .3s ease-out; 
}
.square:hover {
  -webkit-transform: scale(2);  
  -moz-transform: scale(2);    
  -o-transform: scale(2);
  transform: scale(2);
}

<div class="square">
  <p>Some text</p>                        
</div>

answered Jun 24 '15 at 16:47

jaunt

4,978
4
33
54

Thanks, that seems to work. But what do you if its an image that you work with? For example: https://jsfiddle.net/q44o0foo/5/ Image gets blurry, which i guess is normal since it's scaling up. If i save it as double the size and then force it down to 50% and then finally make it resize a bit when hover, would that work? Or how is it normally done with images? – qua1ity Jun 24 '15 at 17:23
To scale an image it is recommended to use an SVG, however if it is a complex image I would do as you suggested. You could also look into image-rendering properties which,while rudimentary, do provide some help. – jaunt Jun 24 '15 at 17:30

CSS - Blurry image/text when rezising

1 Answers1