Scaling image resolution

[ohkwon]

Hello,

I’ve applied scaling animation on image assets. When scroll down, asset gets enlarged. Animation works well however the resolution breaks down.

Anyone can help out this?

Preview site:
https://preview.webflow.com/preview/wequ-website?preview=11b28da973f2dfa27f63eb39a8184ae0

Published site:

WeQ – The true remedy for workplace loneliness.

Your help is highly appreciated!

[Siton_Systems (Ezra Siton)]

Bug Chrome

This is Chrome bug (In firefox + explorer edge works fine).

Related (Anyway - Wait for stuff answer - I don’t find how to solve this for Background-images + Your read-only link is broken):

CSS transition effect makes image blurry / moves image 1px, in Chrome?

A fix for when your elements move up and/or blur during animations/interactions on Chrome

Sure, you go to your site dashboard, there’s a Custom code tab. Inside there’s two boxes, in the Head box, put this code: <style> /* Kill the blink/flickering */ .yourDivClass { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); transform: translateZ(0); } </style> When there’s already code in the box, put it at the very end. You can target multiple classes by adding them this way: <style> /* Kill the blink/flickering */ .yourDivClass, .yourOth…

** Out of topic: Use smaller images (The end / large size is 100px X 100px but the image is 1000px X 1000px).

[ohkwon]

Hi Siton, thanks for your reply!

Sometimes it get sharps…

Sorry for the link. Now it works.

[irvinborder]

You create image zoom effect using css3 transitions. That means you can Grow an Image or Shrink and Image on mouse hover can be created using CSS3 scaling transformation.