Love Running 12: Hero Image Cover Text


Okay, welcome back and well done on getting this far. So we now have the hero image animation in place. Let’s now provide our users with a simple headline as to what the site is about. One effective way to do this is to overlay text on the hero image to draw the users attention. Having a subtle color contrast between the overlay background and the image helps the text to stand out. Setting the opacity on the overlay background allows the hero image to still be effective and seep through. We’ll use a div as the container for our overlay and we’ll give that div an ID name of “cover-text” for our styling. But before we style it, we’ll add the actual cover text which is “Love Running Docklands & Phoenix Park” We’ll use a h2 heading for our Lovering text and we’ll use a h3 for the running locations. Next let’s style the text And we’ll begin by setting the font color for the cover text to white so it can be seen more clearly We also need to specify the h2 in the cover text to override the default setting. Next, we’ll style the overall cover-text div excluding the h2. Begin by setting the font-size to 130% We’ll then set our font family to “oswald” because this is all heading text. In keeping with our headings, let’s make the text uppercase and set our letter-spacing to 4px. Then we set the width and the height values for the cover-text div. Our width will be 300px and the height will be 200px. We’ll push the padding-top down by 40px See here the result in the finished version for a comparison. And we’ll set the padding-left to 10px We’ll then set the background-color to a form of red. And we’ll use rgba values so we can assign an opacity value as well. We’ll set the opacity to .7 to allow the image to seep through. Next, we’ll place our cover text at a fixed position relative to its parent container. The bottom will be 30px above the bottom of the hero image. The right will be 150px in from the right of the image container. We then need to fix it in place by setting its position to “absolute” But you see when we run the code the position is fixed relative to the entire screen; which is the default behavior. We need to do one more thing to get it to work. The parent of both the cover-text overlay and the image is the hero-outer section. So we need to specifically set its position to relative so that the child containers can set their absolute position relative to it. So let’s do that now. Run our code to verify. There we have it. The cover text position is fixed in relation to the hero-outer section. In our next video we begin to build out the club ethos section. So again, well done and getting this far.

Leave a Reply

Your email address will not be published. Required fields are marked *