I am looking to implement a unique functionality that involves three images sliding out of the page to the right, fading in the process, and not overflowing. Simultaneously, three other images slide in to take their place.
If you want to see the Framework JFiddle, you can find it here: https://jsfiddle.net/pskdtzL1/64/ (make sure to view it in the 'right results' setting)
While the animation is working fine, I am facing an issue where the incoming images are displayed in the 'left' div despite having 'overflow:hidden' set in the 'main' div. I would prefer the image displays to be limited to the div they are placed in.
Any assistance on this matter would be greatly 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 */