I have this pen, which is a snippet of a larger project, where I'm trying to hide a div as it gets transformed off to the left. The elements that needs to hide it's overflowed content is .fixed-strip and the element to be hidden is .strip. As soon as I add overflow: hidden; or overflow-x: hidden; to .fixed-strip it hides all the content, not just the transformed content.
.fixed-strip{
max-width: 20rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-left: auto;
margin-right: auto;
position: relative;
}
.strip {
display: block;
background-color: fade_out(rgba(122, 116, 97, 1),0.6);
left: 0;
top: 1rem;
width:300px;
height:80px;
position: absolute;
transition: transform .5s ease-in-out;
z-index: 1000;
}
The whole header has to be in a position:fixed; container for other reasons. Could this be causing the issue?
I tried your pen, and if I understood what your problem is, try giving a suitable height to fixed-strip.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments