CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Radical_Activity
Radical_Activity

Reputation: 2738

How to prevent blur from CSS transform?

I have some issues using CSS's zooming capability. Whenever I zoom in on an element it gets a little blurry even though it's not an image, just a simple text element.

I'm using Hover.css's code to make grow a div inside my code. But as you can see at Hover.css if you hover your mouse on 'Grow' it gets a bit blurry too.

http://ianlunn.github.io/Hover/

CSS Code:

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

How is that possible to grow the element like this above example, but make everything sharp as before?

Upvotes: 6

Views: 8831

Answers (3)

user6213434
user6213434

Reputation:

You can increase the size of the element and give it scale less than 1 such .5, then extend scale to 1 (no more than 1) on hover / focus / active or any event , so if you want to increase scale zoom you should increase the element size not the scale to prevent blurry effect. https://jsfiddle.net/qb2Lhtz9/11/

.hvr-grow {
  position: absolute;
  top: 10%;
  left: 10%;
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: scale(.5) translateZ(0) translateX(-10%) translateY(-10%);
  font-size: 100px;
  -webkit-transition: transform 400ms;
  transition: transform 400ms;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
   transform: scale(1)
}
<a href="#" class="hvr-grow">Grow</a>

Upvotes: 4

Misa
Misa

Reputation: 31

What you can do, as suggested here, you first make element as big as on hover, then scale it down to initial size like transform: scale(.5, .5); and then on hover switch scale to transform: scale(1, 1);

You need to remove -webkit-backface-visibility: hidden; backface-visibility: hidden; and add perspective(1px) to scale like this -webkit-transform: perspective(1px) scale(1.1); transform: perspective(1px) scale(1.1); this seems to fix blur in chrome. Here is an example https://jsfiddle.net/qb2Lhtz9/9/ it is not perfect, but I hope it can help..

Upvotes: 1

Carlton
Carlton

Reputation: 848

Have you considered making the element scaled smaller by default. Then scale it to 1 when hovered/active?

CSS

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

Upvotes: 1

Related Questions