Image movement outside Div

Question

I'm creating a website that has a black div in the center of the page and when I hover over it, the image in the center rotates. The problem is that although I put the image inside a div, it goes outside the bounds of the div. How to fix this problem? This is my HTML code: constimage=document.getElementById("pic");image.classList.add("rotate");constclone

P粉054616867 · Answer

Just add position: relative to your #container selector. This will position the child elements relative to this element.

If desired, you can also add overflow:hidden to truncate content beyond the scope of this element. However, if you don't need it, delete it.

const image = document.getElementById("pic");
image.classList.add("rotate");
const clone = image.cloneNode(true);
clone.classList.add("rotate-negative");
clone.classList.add("top-image");
clone.classList.add("shadow-lg");
document.getElementById("container").appendChild(clone);

img {
  transition: 0.5s;
  max-height: 600px;
}

.rotate{
  transform: rotate(15deg);
  position: absolute;
  top: 0;
  left: 0;
}

.rotate-negative{
  transform: rotate(-5deg);
  position: absolute;
  top: 0;
  left: 0;
}

.top-image:hover{
    transform: rotate(0deg);
    transition: 0.5s;
    max-height: 620px;
}
#container{
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 30%;
    background-color: black;
    
    /*added*/
    position: relative;
    /*overflow:hidden;*/
}