And when the overflow doesn’t work?

Asked

Viewed 876 times

-1

I’m working with some images with a zoom effect using transform: scale(x);. But when you zoom in, especially on mobile, the image goes beyond the side container.

So it doesn’t appear in itself but the size of it exceeds generating that lateral vacuum that makes it possible to pull the screen to the side and there is a blank space on the side, and the overflow: hidden; is not solving.

Someone knows another way to hide it?

inserir a descrição da imagem aqui

.hoverzoom:hover > img {
    transform: scale(1.5);
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}
css image

  • You are disabling the zoom with <meta name="viewport" content="width=device-width, user-scalable=no"> ?

  • I think not, it is necessary there in case it would disable the zoom effect on mobile?

  • Look what’s coming up on my console, but that was coming before the zoom effect I think... The key "width:device-width" is not recognized and Ignored.

  • did that friend worked. . mt obg

  • 2

    The overflow: hidden cannot be in <img>, should be in some <div> parent of her;

1 answer

0

But you need to put a Hover on mobile and tablet? There are several ways to solve this, one of them is to disable this Scale in smaller resolutions:

@media screen and (max-width:990px) {
  .hoverzoom:hover > img {
    transform: scale(1);
  }
}

Browser other questions tagged css image

You are not signed in. Login or sign up in order to post.