CODEWITHSUNDEEP
htmlcss
Ching Ching
Ching Ching

Reputation: 1049

CSS Prevent Overflow when Using transform SCALE

i have a problem when using transform: scale();

basically, i'm using this scale on Image that has overflow:hidden

check this fiddle out for live action : https://jsfiddle.net/ns3vm3x6/

HTML 

<div id="container1">
  <img src="http://lorempixel.com/400/200">
</div>
<p> i want this image to scale just like #example no. 2. how to achive this one? </p>
<br><br>
<div id="container2">
  <img src="http://lorempixel.com/400/200">
</div>

CSS

#container1 {width:100%; height:200px; border:2px solid red;
 overflow-x:scroll; overflow-y:hidden; white-space:no-wrap; }

#container2 {width:100%; height:200px; border:2px solid red; white- space:no-wrap;  }
img {width:200px; height:200px; transition:transform 1s linear; }
img:hover {transform:scale(2); }

How to prevent that overflow when scaling image?

what's wrong with my code?

thanks in advance...

Upvotes: 10

Views: 17658

Answers (3)

vohracodes
vohracodes

Reputation: 1

I got the answer , I was also facing this issue but now its solved

Here I'm sharing

set images position to relative and set top: 20px;

img:hover {
       
     position: relative;
     top: 20px;

}

Upvotes: 0

Rodrigo Grundig
Rodrigo Grundig

Reputation: 11

Make sure your container has the width and height as your desired outcome.

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <div class="wrap">
    <div class="bg agent-1"></div>
  </div>
</body>
</html>

less (css)

    @keyframes fade-in {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(2);
      }
    }
    .agent-1 {
      animation: fade-in cubic-bezier(0.0, 0.0, 0.2, 1) 10s forwards;
    }

    .bg {
      width: 100%;
      height: 100%;
      background-image: url(https://images.unsplash.com/photo-1498811107811-a20a5be82dc1?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=01f6b00c3415f756949a44aadb54567e);
      background-size: cover;
      background-position: center;
    }

    .wrap {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

demo: https://jsbin.com/bavutanixu/edit?html,css,output

Upvotes: 0

Pedram
Pedram

Reputation: 16575

You need to set position: absolute for img

img {width:200px; 
height:200px; 
transition:transform 1s linear;
position: absolute; 
}

JSFiddle

Upvotes: 5

Related Questions