Display div when container overflow is hidden - html

Question

I have a divcontaining a lot of elements, so I must use a scroll. The idea is to show a popup on div's hover. But overflow: hidden is not enough to show popup. I tried many ways but failed and I run out of ideas.
This is my code:
https://codepen.io/Danica1986/pen/gVjvva?editors=0110
class Content extends React.Component {
render() {
return (
<div className="footer">
<div className="footer-content">
<div className="scene-list-contnet">
<div className="list-slide-items">
<div className="item-with-scene">
<div className="scene-placeholder">
<img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" className="scene-img" />
<div className="open-scene-options"><img src="https://cdn2.iconfinder.com/data/icons/minimalist-arrows-set/100/ARROW-expand__up_arrow-512.png"/></div>
<div className="scene-options">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
React.render(<Content />, document.getElementById('app'));
.footer
width: calc(100% - 64px)
height: 150px
position: fixed
top: 250px
background: #fff
margin-left: 64px
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1)
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1)
.scene-list-contnet
width: calc(100% - 92px)
float: right
height: 100px
overflow-y: scroll
.footer
.list-slide-items
margin: 7px 0px
list-style-type: none
display: -webkit-inline-box
display: -ms-inline-flexbox
display: inline-flex
-webkit-box-orient: horizontal
-webkit-box-direction: normal
-ms-flex-direction: row
flex-direction: row
margin-bottom: 0
.item-with-scene
width: 145px
height: 82px
margin-right: 15px
display: inline-block
.scene-placeholder
position: relative
width: 100%
padding-top: 56.25%
.scene-placeholder
img
max-width: 100%
.open-scene-options
position: absolute
width: 21px
top: 5px
right: 5px
background: #fff
z-index: 3
border-radius: 100%
text-align: center
-webkit-transition: all 0.2s linear
transition: all 0.2s linear
cursor: pointer
visibility: hidden
img
-webkit-transform: rotate(180deg)
transform: rotate(180deg)
width: 8px
-webkit-transition-duration: 1s
transition-duration: 1s
-webkit-transition-property: -webkit-transform
transition-property: -webkit-transform
transition-property: transform
transition-property: transform, -webkit-transform
&:hover
img
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
& + .scene-options
visibility: visible
&:hover
.open-scene-options
visibility: visible
.list-slide-items
.scene-placeholder
.scene-img
max-width: 100%
max-height: 100%
width: 100%
position: absolute
top: 0
bottom: 0
left: 0
right: 0
z-index: 1
cursor: pointer
opacity: 0.6
-webkit-transition: all 0.2s linear
transition: all 0.2s linear
&:hover
opacity: 1
.scene-options
width: 141px
height: 165px
position: absolute
z-index: 11
background: #fff
bottom: 90px
left: 63px
background: #fff
border-radius: 18px
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1)
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1)
padding: 12px 17px
&:hover
visibility: visible
&:after
content: ""
width: 0px
height: 0px
position: absolute
border-left: 10px solid transparent
border-right: 10px solid transparent
border-top: 10px solid #fff
border-bottom: 10px solid transparent
left: 57px
bottom: -20px
ul
list-style-type: none
margin-bottom: 0
.open-scene-options
&:hover
.scene-options
visibility: visible