HTML and CSS Reference
In-Depth Information
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
quite big.
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.
.movie-header {
...
.poster {
position: absolute;
top: 0%;
@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
style.
.movie-header {
...
.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);
}
}
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.
.movie-header {
...
.movie-title {
