Image hover coming out of the box

HTML & CSS
1 
.snippet-box:hover img {-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;}

I am using the above CSS on some image hover, but it is coming out of the DIV. Is there a way we can make sure that it doesnt comes out of the div?

2

Without seeing the markup and the rest of the styles I doubt anyone can give you much of an answer.

3 Likes
3

Ok I am replicating this in the codepen.

4

#Update
May be this Video GIF can help you to see this →

1486×706 1.38 MB

I do not want that this should come out of the div, but enlarge within.

5

@codeispoetry: that still doesn’t show us the HTML and other CSS rules you have in place. If you give us the fuill code, we can see the issue for ourselves. Showing us a picture tells us little or nothing about the code.

2 Likes
6

As a rough guess without seeing the full code, I think overflow: hidden on the container may help.

2 Likes
7

I think @codeispoetry is using transform:scale(); along with the transitions in the css from post 1.

In the screenshot you notice the enlarged image is not pushing on the other boxes around it.

The Transform Rendering Model explains that behavior.

For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area.

So yes, overflow:hidden; could be used to keep a scaled image within it’s parent box.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Transform Zoom</title>
<style>

.zoom {
   width:60%;
   max-width:300px;
   margin:2em auto;
   padding:1em;
   background:#ccc;
   border-radius:10px;
   text-align:center;
   overflow:hidden;
}
.zoom img {
   display:block;
   margin:0 0 1em;
   max-width:100%;
   height:auto;
   border-radius:10px;
   transition:transform 0.5s;
}
.zoom img:hover {
   transform:scale(1.7) ;
}
</style>

</head>
<body>

 <figure class="zoom">
    <img src="https://placebear.com/300/200" width="300" height="200" alt="">
    <figcaption>Mouseover image to enlarge</figcaption>
 </figure>

</body>
</html>
4 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.