Making an image card

Use CSS position absolute and relative to make an image card.

Goal

We’re going to look at how to make the image card pattern, concentrating on position absolute and relative.

This is what it should look like when it’s done:

  1. Important

    The two important bits are the “Plant-eater” label and the “Stegosaurus” heading and how they’re on top of the image.

  2. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the making-an-image-card repository.

Fork & clone the “making-an-image-card” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up project

Before we get started, create some files and get ready.

  1. making-an-image-card
  2. index.html
  3. css
  4. main.css
  1. Make an index.html
  2. Make a main.css in your css folder.

  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Add HTML boilerplate

Use the html5, viewport and css snippets.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Image card</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

</body>
</html>

  1. HTML snippets

    Create the boilerplate with html5, viewport & css

  2. Line G

    Don’t forget to attach the CSS file.

3 Add CSS boilerplate

Use the borderbox snippet.

html {
  box-sizing: border-box;
  font-family: sans-serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.img-flex {
  display: block;
  width: 100%;
}

  1. Lines J–M

    Make a class to use on any image to make it scalable.

4 Write the HTML for the card

Let’s start with a little HTML before moving into the CSS guts.

⋮
</head>
<body>

  <article class="card">
    <header class="card-head">
      <h2 class="card-title">Stegosaurus</h2>
      <span class="card-label">Plant-eater</span>
      <img class="img-flex" src="https://placehold.it/640x480" alt="">
    </header>
    <div class="card-body">
      <p>The Stegosaurus is an armoured dinosaur with distinctive back plates and tail spikes.</p>
    </div>
  </article>

</body>
</html>

  1. Notice

    There’re classes on just about everything to distinguish them from other elements in our page.

  2. Line E

    Semantically an <article> makes sense because this can stand by itself.

  3. Line F

    The important bits are in the <header> because a group will be needed for CSS later.

  4. Line I

    Don’t forget the img-flex class to make the image flexible.

5 Some basic CSS for the card

Before we get into the positioning stuff, let’s get the basic card look done.

⋮
  display: block;
  width: 100%;
}

.card {
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0 6px 6px;
}

.card-body {
  padding: .2rem 1rem;
}

.card-title {
  margin: 0;
  padding: .3rem 1rem;
}

.card-label {
  padding: .3rem 1rem .3rem calc(1rem - 4px);
  border-left: 4px solid green;
  background-color: rgba(255, 255, 255, .6);
}

With a refresh what you should see is this:

Make sure to shrink the width of your browser—the image card is completely flexible.

  1. Line G

    The overflow: hidden is here to chop the corners of the image off.

  2. Line V

    The crazy calc() is just really to make the text align properly when it also has a border.

    The calc() value allows us to get the browser to calculate between two different units.

6 Position the card title

Now let’s position the .card-title so that it sits at the bottom of the image.

.card-title {
  ⋮
  margin: 0;
  padding: .3rem 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

Notice how the title is now at the bottom of the screen, that’s because the coordinates for absolute default to position against <body>

Make sure to shrink the width of your browser—the image card is completely flexible.

  1. Line E

    Setting it to position: absolute allows us to move it around using coordinates.

  2. Lines F–G

    Using left and bottom to move it to the bottom of the image.

  3. Line H

    The width is there because absolute elements shrink to be as small as possible.

7 Fix card title position

To fix the positioning of the .card-title we need to find a parent element that we can set position: relative

Using relative will reset the coordinates so the bottom and left position against the parent container instead.

Luckily, it’s inside the <header class="card-head"> tag. So let’s target that!

⋮
  border-left: 4px solid green;
  background-color: rgba(255, 255, 255, .6);
}

.card-head {
  position: relative;
}

Now the .card-title snaps right into place.

  1. Line G

    Using position: relative on this element will reset the coordinate system for all absolute children.

8 Position the card label

Since the .card-head is already relative all we need to do is just put absolute and coordinates onto .card-label

Because it’s parent container is relative it will automatically position itself against that box.

.card-label {
  ⋮
  padding: .3rem 1rem .3rem calc(1rem - 4px);
  border-left: 4px solid green;
  background-color: rgba(255, 255, 255, .6);
  position: absolute;
  left: 0;
  top: 0;
}

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.