Showcase Article
Adding a showcase article link using a background image.
Last updated
Was this helpful?
Adding a showcase article link using a background image.
Last updated
Was this helpful?
We're going to build the front page of a newspaper website. In this exercise we're going to add a showcase article at the top of the landing with a link to a feature article.
We've added a <header> element to place the showcase section. The showcase section will have a background image with text and a button layered on top of it. The technique necessary to get the image to be in a layer below the text and buttons is to set it using the CSS background property, instead of inserting an <img> element within the HTML page.
The background property has the following values that we will set:
url - the location of the image
center/cover - cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
We have set the height to 40vh, which means 40% of the viewport, or visible screen. We are using vh units so that the header is adjusted relative to the other content that is visible on the screen. We'll take a look at how this works once we get the showcase finished. We've also created some padding around the showcase content and set the text color to white.
Now we just add the content, which includes the category tag, a title, and a description. We're going to stick with the default settings for the font size and weight for the text, so we don't need to add any additional CSS.
Set the width of the paragraph within the showcase to be 50%.
The last item we need to add is the button at the bottom of the showcase section that links to the article. Most of the CSS in the code below should be familiar to you at this point. There is one new one we're going to introduce.
The ":" character indicates a special keyword is associated with a selector. This is called a pseudo-class. They are used to indicate a special state of the selected element. For example, :hover can be used to change a button's color when the user's pointer hovers over it. In our case, we're going to use it to change the opacity (darkness) or the button when the user hovers over it.
They are called "pseudo-classes" because they let you apply a style to an element in relation to external factors like the history of the navigator (:visited), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).