Images are visible outside div

Issue

I want to make image slider using transform: translate() and div with images. My goal is slide the div with images (inside the pics-div) and I want div with images not to be visible outside the pics-div and images be displayed only in div where they are.

#pics-div {
  width: 700px;
  height: 400px;
  margin-top: 50px;
}

#left-btn {
  width: 30px;
  height: 100px;
  margin-left: 40px;
  margin-top: 190px;
  background-color: rgb(41, 32, 170);
  transition: 0.1s;
  cursor: pointer;
}

#left-btn:hover {
  /* background-color: rgb(70, 13, 13); */
  box-shadow: 1px 1px 10px 1px rgb(41, 32, 170);
}

#right-btn {
  width: 30px;
  height: 100px;
  margin-top: 190px;
  background-color: rgb(41, 32, 170);
  transition: 0.1s;
  cursor: pointer;
}

#right-btn:hover {
  /* background-color: rgb(70, 13, 13); */
  box-shadow: 1px 1px 10px 1px rgb(41, 32, 170);
}

<h3>Image slider</h3>
<div style='display: flex;'>
  <div id='left-btn'>
    <p>L</p>
  </div>
  <div id='pics-div'>
    <div style='display: flex;'>
      <img src='https://shorturl.at/chBHM' alt='Red trees' height="400" width="700">
      <img src='https://shorturl.at/aAEX5' alt='Winter house' height="400" width="700">
    </div>
  </div>
  <div id='right-btn'>
    <p>R</p>
  </div>
</div>

Solution

Consider applying overflow: hidden to hide any overflow from the element's padding box:

#pics-div {
  width: 700px;
  height: 400px;
  margin-top: 50px;
  overflow: hidden;
}

#left-btn {
  width: 30px;
  height: 100px;
  margin-left: 40px;
  margin-top: 190px;
  background-color: rgb(41, 32, 170);
  transition: 0.1s;
  cursor: pointer;
}

#left-btn:hover {
  /* background-color: rgb(70, 13, 13); */
  box-shadow: 1px 1px 10px 1px rgb(41, 32, 170);
}

#right-btn {
  width: 30px;
  height: 100px;
  margin-top: 190px;
  background-color: rgb(41, 32, 170);
  transition: 0.1s;
  cursor: pointer;
}

#right-btn:hover {
  /* background-color: rgb(70, 13, 13); */
  box-shadow: 1px 1px 10px 1px rgb(41, 32, 170);
}

<h3>Image slider</h3>
<div style='display: flex;'>
  <div id='left-btn'>
    <p>L</p>
  </div>
  <div id='pics-div'>
    <div style='display: flex;'>
      <img src='https://shorturl.at/chBHM' alt='Red trees' height="400" width="700">
      <img src='https://shorturl.at/aAEX5' alt='Winter house' height="400" width="700">
    </div>
  </div>
  <div id='right-btn'>
    <p>R</p>
  </div>
</div>

You can Read more about overflow: hidden on MDN.

Answered By - Wongjn