CODEWITHSUNDEEP
htmlcsscss-transformsblurry
nbar
nbar

Reputation: 6158

transform scaleing down makes image blurry

I try to make a little zoom effect on hover for some products. For that I scale the container of the image down to 95% and scale it too 100% on hover:

However the image scaled down apears blurry . I tried different solutions given in other Questions about this topic, like: backface-visibility, blur(0), translateZ. But nothing seems to change anything.

Is there a way to make this prettier or is this as good as it can get?

.container {
	transform: scale(0.95);
	transition: transform 70ms ease-in;
  float: left;
}

.container:hover {
	transform: scale(1);
}
<div class="container">
<img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
<img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

Upvotes: 4

Views: 1275

Answers (2)

Syden
Syden

Reputation: 8625

Add the following CSS to your img element (Not a safe hack cross-browser-wise): 

img {
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
   image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

Snippet below: 

.container {
  transform: scale(.95);
  transition: transform 70ms ease-in;
  float: left;
}
.container:hover {
  transform: scale(1);
}
img {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

Alternative 1: to avoid dimension altering properties, something like translate on img:

.container {
  transition: transform 70ms ease-in;
  float: left;
  margin: 5px;
}
.container:hover img {
  transform: translate(0, -3px);
}
<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

Alternative 2: box-shadow:

.container {
  transition: transform 70ms ease-in;
  float: left;
  margin: 5px;
}
.container:hover img {
  box-shadow: 0px 0px 5px #888888;
}
<div class="container">
  <img src="https://s28.postimg.org/kagu55chp/csm_632san_Amalfi_Pearl_ca02784e51.jpg" />
</div>
<div class="container">
  <img src="https://s24.postimg.org/cdecsntlx/csm_594san_Amalfi_Silver_bbb138a25a.jpg" />
</div>

Upvotes: 2

Paurian
Paurian

Reputation: 1402

I believe your issue runs in pixel interpolation: http://www.cambridgeincolour.com/tutorials/image-interpolation.htm

When an image is resized, the pixels must be adjusted. By shrinking, pixels are averaged and reduced. By enlarging, pixels are added and averages between pixels fill the gaps.

Please use an image editor like Photoshop or Gimpshop to resize the image, as an image program is better designed for this than a web browser.

On that note, certain percentages work better than others when it comes to browsers handling the interpolation. I've noticed it to typically be those on each quarter: 25%, 50%, 75% reduction and 125%, 150%, 175% enlargements tend to be handled better than other numbers (like 95% or 73%, etc.).

Upvotes: 1

Related Questions