# Overflow Hidden Doesn't Work for Child Containers

**URL:** <https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459>\
**Category:** Curriculum Help\
**Created:** [March 22, 2025, 10:44pm UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459 "2025-03-22T22:44:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![irchapman9](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/irchapman9/32/374350_2.png) [@irchapman9](https://forum.freecodecamp.org/u/irchapman9)\
**Post date:** [March 22, 2025, 10:44pm UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/1 "2025-03-22T22:44:29Z")

</div>

Hello! This is my first ever project designing a website for my Paint & Sip biz (yay!), I have a page where I have my personal art listed as a portfolio. What I want is when you hover above an image for the image to zoom in without the dimensions of the container changing.

I thought this is simple enough and every “how-to” video also makes it look simple, it has not been simple. I have a big container to hold two more containers to act as two columns. Then, all my img elements contained in smaller containers stacked in the column containers. I can get the image to zoom when mouse hovers, but the edges of the image expand beyond the dimensions of the div container they are in. I tried using “overflow: hidden” but this doesn’t work for my small containers.

What I’ve tried:

- Overflow hidden on one of my column containers, the parent of my smaller containers. This worked for containers whose edges were the same as the big container. So, the left and right sides would keep their dimensions, but not the top and bottom.
- Getting rid of two column containers so I only have small containers set to overflow. Still didn’t work.
- I’ve changed the size of the containers to maybe better fit the image?
- used “width: 100% height: 100%” with img elements with dimensions specified in pixels for their parent containers
- All variations of the position element for parent and child containers.
- All combinations of containers and img elements with and without overflow.

I feel like I’ve tried everything, although I am sure it is a simple fix or perhaps just some weird hierarchy thing with overflow. However, I haven’t found anything about that in my research. Help would be greatly appreciated, thank you!

Project link: [http://127.0.0.1:3000/portfolio/html](http://127.0.0.1:3000/portfolio/html)

html:

```html
<div id="mainbody">
     
      <div id="sidenav">
        <a href="/index/html">Home</a>
        <hr>
        <a href="/paintnsip/html">Paint & Sip</a>
        <hr>
        <a href="/ramblings-of-an-artist/html">Ramblings of an Artist</a>
        <hr>
        <a href="/tutorials/html">Tutorials</a>
        <hr>
        <a href="/knickknacks/html">Knick Knacks</a>
        <hr>
        <a href="/portfolio/html">Portfolio</a>
        <hr>
        <a href="/zines/html">Zines</a>
      </div>
      
      <div id="bigcontainer">
        
        <div id="boxleft"> 
            
            <div id="container1">
              <img id="container1img" src="/img/IMG_9910.jpeg" alt="">
               <div id="overlay">
                <div id="text">Blue Mushroom</div>
              </div>
            </div>

```

CSS:

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

html {
    background-color: white;
    font-family: Mang Gondrong, sans-serif;
    cursor: url(/img/website_curser2.svg), auto;
}

@font-face {
    font-family: Mang Gongrong;
    src: url(Mang Gondrong.ttf);
}

#header {
    cursor: url(/img/website_curser2.svg), auto;
}

h1 {
    font-family: Super Arena, sans-serif;
    padding-left: 250px;
    padding-top: 100px;
    padding-bottom: 50px;
    font-size: 100px;
}

#mainbody {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-left: 40px;
    z-index: 1;
    cursor: url(/img/website_curser2.svg), auto;
}

#sidenav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 100px;
    width: 130px;
    height: 500px;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
    margin-left: 20px;
    padding: 15px 15px 15px 15px;
    background-color: #d5b9f1;
    color: white;
    border-radius: 10px;
    z-index: 2;
    cursor: url(/img/website_curser2.svg), auto;
    font-family: Mang Gondrong, sans-serif;
}

a {
    text-align: center;
    color: white; 
    text-decoration: none;
    margin: auto;
    white-space: wrap;
    cursor: url(/img/website_curser2.svg), auto;
    transition: 0.7s;
}

a:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 0.7s ease;
}

hr {
    color: white;
    margin: auto;
    width: 25px;
    border: solid white 1px;
}

img {
    border-radius: 10px;
}

#bigcontainer {
    display: flex;
    flex-direction: row;
    margin: 40px;
    margin-top: 20px;
}

#boxleft {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    margin-right: 40px;
}

#container1 {
    width: 500px; 
    height: 825px; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    
}

#container1img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without stretching */
    transition: 0.7s ease;
    border-radius: 10px;
    overflow: hidden;
    
}

#container1:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    transition: 1s ease;
    max-width: 100%; 
   max-height: 100%; 
    
}

```

---

<div class="post-metadata">

**Author:** ![HungryBee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hungrybee/32/345970_2.png) [@HungryBee](https://forum.freecodecamp.org/u/HungryBee)\
**Post date:** [March 22, 2025, 11:43pm UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/2 "2025-03-22T23:43:37Z")

</div>

If I understand correctly it bothers you that the text underneath gets moved.

I think it’s because of this:

```auto
#container1:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
transition: 1s ease;
max-width: 100%;
max-height: 100%;
}

```

You are zooming the entire div. If you change `#container1:hover` to `#container1img:hover` it will only zoom the image inside it’s own container.

(Also as a side note, you can’t link your local webproject using your local ip like that. You would have to host it somewhere). To say it in a short term, these ip numbers are just telling your browser to use documents on your own pc.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 24, 2025, 10:11am UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/3 "2025-03-24T10:11:55Z")

</div>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (').

---

<div class="post-metadata">

**Author:** ![irchapman9](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/irchapman9/32/374350_2.png) [@irchapman9](https://forum.freecodecamp.org/u/irchapman9)\
**Post date:** [March 25, 2025, 1:59am UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/4 "2025-03-25T01:59:02Z")

</div>

Thank you for your comment! At this moment, it doesn’t bother me the text is being moved. I would like to fix that but right now I’m just trying to troubleshoot zooming in the image without the dimensions of the container changing.

I followed you advice of changing `#container1:hover` to `#container1img:hover` but I am still having the same problem where the dimensions of the child containers change when I hover over the image.

I’m not sure what I’m doing wrong , but thank you again for your help!

---

<div class="post-metadata">

**Author:** ![irchapman9](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/irchapman9/32/374350_2.png) [@irchapman9](https://forum.freecodecamp.org/u/irchapman9)\
**Post date:** [March 25, 2025, 2:06am UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/5 "2025-03-25T02:06:39Z")

</div>

Actually after modifying some stuff I kinda got it to work! I am able to get `overflow:hidden` to work for the sides and top of the container, not the bottom 🥲 I’m going to keep trying to experiment though. Thank you for your help!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [September 23, 2025, 2:07pm UTC](https://forum.freecodecamp.org/t/overflow-hidden-doesnt-work-for-child-containers/740459/6 "2025-09-23T14:07:12Z")

</div>

Closed on September 23, 2025, 2:07pm UTC

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