dodo moh dodo moh - 7 months ago 9
Javascript Question

css animation full page with current view location

i have created an two animation with css https://codepen.io/anon/pen/yOqxdq html an css

<img onclick="show(this);" src="http://tigersincrisis.com/wp-content/uploads/2014/01/image_21.jpg">

@keyframes shadow {
0% { opacity: 0;height: 0; transform : scale(0.1);}
100% { opacity: 1; height: 100%;transform : scale(1);}
}
@keyframes show {
0% { opacity: 0;margin: 20% auto;width: 20%;height: 20%;}
100% { opacity: 1;margin: 0; width: 100%;height: 100%;}
}
#show {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.76);
animation-name: show;
animation-duration: 2s;
animation-fill-mode: forwards;
z-index: 5;
}
#show-item{

position: relative;
margin: 0 auto;
animation-name: shadow;
animation-duration: 3s;
animation-fill-mode: forwards;
opacity: 0;
padding-top: 40px;
}
#show-item img{
border: 4px solid black;

}
a#closeShow{
position: relative;
float: right;
text-decoration: none;
color: #C8C8C8;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.9);
border-radius: 26px;
height: 18px;
position: relative;
top: 25px;
left: 10px;
border: 2px solid #e0e0e0;
box-shadow: 0 0 2px black;
}


the problem is when user scroll the view is changed and div with position absolute stays up and box of showdow doesn't show on portion of the page down

Answer

Try position: fixed; for #show.

DEMO: FIDDLE