html - 如何防止图片溢出到div中？

Question

我试图实现以下功能:https://puu.sh/BkRe7/20235d49fc.gif 三张图片向右滑出页面，在这个过程中逐渐淡出但没有溢出 - 其他三张图片滑入取代它们的位置。

框架 JFiddle:https://jsfiddle.net/pskdtzL1/64/ (在“正确结果”设置中查看)

动画效果很好；问题是，尽管“主”div 中存在“溢出:隐藏”，但传入的图像仍显示在“左”div 中。我希望图像显示仅限于放置它们的 div。

感谢您的帮助。

---

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 */

脚本

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

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

Answer 1

我现在不能发表评论，所以我会尽力提供一个答案。

由于图像嵌套在主容器内，您可以添加属性:

position: relative;

到主类，

.main {
    ...
    position: relative;
}

这样在主类内部完成的任何定位都将相对于 main 的容器。