CODEWITHSUNDEEP
htmlcssanimationoverflow
OverLordGoldDragon
OverLordGoldDragon

Reputation: 19806

How to keep images from overflowing into divs?

I seek to implement the following functionality: https://puu.sh/BkRe7/20235d49fc.gif Three images slide out of the page to the right, fading in the process and not overflowing - and three others slide in to take their place.

Framework JFiddle: https://jsfiddle.net/pskdtzL1/64/ (view in 'right results' setting)

The animation works fine; problem is, the incoming images are displayed in the 'left' div despite 'overflow:hidden' in the 'main' div. I would like image displays to only be limited to the div they are placed in.

Help is appreciated.

HTML

<div class="row">
    <div class="left">
    Stuff
    </div>

    <div class="main">
    <!-- several <img> and a <button>-->
    </div>
</div>

CSS

* {box-sizing: border-box;}   
.row {display: flex; flex-wrap: wrap;} 
.left {flex: 20%;
       background-color: #f1f1f1;
       padding: 20px;}
.main {flex: 80%;
       background-color: white;
       padding: 20px;
       overflow: hidden;}
.lleft {position:absolute; left: -300px;} 

/* Animation CSS */

JScript

function Btn(){
  document.getElementById('bx1').classList.add('outward'); 
  ... 
  document.getElementById('bx4').classList.add('inward'); 
  ...
  document.getElementById('bx0').removeAttribute('style');}

  /* 'outward' & 'inward' = CSS animations */

Upvotes: 0

Views: 73

Answers (2)

Gerard
Gerard

Reputation: 15796

I added a z-index to class .left and set the padding/margin for the body to zero.

function Btn() {
  document.getElementById('bx1').classList.add('outward');
  document.getElementById('bx2').classList.add('outward');
  document.getElementById('bx3').classList.add('outward');
  document.getElementById('bx4').classList.add('inward');
  document.getElementById('bx5').classList.add('inward');
  document.getElementById('bx6').classList.add('inward');
  document.getElementById('bx0').removeAttribute('style');
}
* {
  box-sizing: border-box;
}


/* Added */
body {
  padding: 0;
  margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 20%;
  background-color: #f1f1f1;
  padding: 20px;
  z-index: 50; /* Added */
}

.main {
  flex: 80%;
  background-color: white;
  padding: 20px;
  overflow: hidden;
}

.lleft {
  position: absolute;
  left: -300px;
}

* {
  box-sizing: border-box;
}


/* Animations*/

.outward {
  animation-name: myAnimation;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

.inward {
  animation-name: myAnimation2;
  animation-duration: 1.3s;
  animation-fill-mode: forwards;
}

@keyframes myAnimation {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    transform: translateX(600px);
    opacity: 0;
    display: none;
  }
}

@keyframes myAnimation2 {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  100% {
    transform: translateX(500px);
    opacity: 1;
  }
}
<div class="row">
  <div class="left">
    Stuff
  </div>
  <div class="main">
    <img id="bx1" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx2" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <img id="bx3" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    <span style="padding-left: 90px" </span>
    <span class="lleft" id="bx0" style="display: none">
      <img id="bx4" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx5" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
      <img id="bx6" src="https://puu.sh/BlP2j/f573060de8.png" width="90px">
    </span><br>
    <button onclick="Btn()">Slide</button>
  </div>
</div>

Upvotes: 0

Ndy
Ndy

Reputation: 41

I can't comment now, So I will try to provide an answer.

Since the image is nested inside the main container, you can add the property:

position: relative;

to the main class, 

.main {
    ...
    position: relative;
}

so that any positioning done inside the main class will be relative to the the container of main.

Upvotes: 1

Related Questions