HTML and CSS Reference
In-Depth Information
/**
* Animations for the poster header
*/
@keyframes posteranimation {
0% { top: 0%; }
100% { top: -80%; }
}
@-moz-keyframes posteranimation {
0% { top: 0%; }
100% { top: -80%; }
}
@-webkit-keyframes posteranimation {
0% { top: 0%; }
100% { top: -80%; }
}
.movie-header {
position: relative;
overflow: hidden;
height: 20%;
.poster {
position: absolute;
top: 0%;
@include animation(posteranimation 10s ease 0 infinite alternate);
}
.movie-title {
position: absolute;
bottom: 0px;
background: rgba(255, 255, 255, 0.75);
padding: 5px;
bottom: 0;
left: 0;
width: 100%;
@include box-sizing(border-box);
.btn-favorite {
float: right;
padding: 10px;
color: #FFFFFF;
background: #7D9DCE;
font-weight: bold;
