HTML and CSS Reference
header . The height is set to 20% , which will ensure that it will appear just as big
on a tablet device as it would on a mobile device. The overflow has been set to
hidden to prevent the poster from being visible outside of the element, as it's
Within the movie style, we can begin to style the poster. Create a new style
within the .movie-header style, as shown in the following code.
@include animation(posteranimation 10s ease 0 infinite alternate);
This will place the poster image at the top of the element. You can see that
there's an animation attached to it. We'll get to that in a bit. Now, it's time to
style the movie title element. Add the following code within the .movie-header
background: rgba(255, 255, 255, 0.75);
This will position the movie title at the bottom of the movie header. It will take up
100% of the width of the header, and has a slightly transparent white background
color so that the text can be seen even on dark poster images. You can see that
we're also using the box-sizing trick to ensure the padding doesn't affect the
specified width of the element.
Within the .movie-title , you will also need to style the the favorite button. This
can be done using the code highlighted next.