Thumbnail Grid Layout Instructions

Semantic Markup

Your starting point should look like step-1.html

The starting html contains a list of thumbnails and links. Each list item looks similar to this:

<li>
  <img src="images/clock_thumb.jpg" alt="alarm clock" />
  <p class="description">Analog Travel Alarm Clock Braun
    <span class="price">$40.00</span>
  </p>
</li>

We can make this markup more meaningful by using the figure and figcaption elements. Review proper usage here: http://html5doctor.com/the-figure-figcaption-elements/

Modify the first couple of list items to include figure and figcaption elements. You should not need to remove any markup.

When finished, each thumbnail block should be marked up like the following:
```
<figure>
 <img src="images/clock_thumb.jpg" alt="alarm clock" />
 <figcaption>
 Analog Travel Alarm Clock Braun
 $40.00
 
 </figcaption>
</figure>
```

The thumbnails should also be links to their respective product pages. Let’s wrap the entire figure in a link. As of HTML5, it’s ok to wrap a block level elements with a link.

<a href="#" title="View product details">
    <figure>
        <img src="images/clock_thumb.jpg" alt="alarm clock" />
        <figcaption>
            <p class="description">Analog Travel Alarm Clock Braun
                <span class="price">$40.00</span>
            </p>
        </figcaption>
    </figure>
</a>

Let’s also center our page and set a max-width of 1200px. We can use the container class on the outermost div for that.
- See notes from Week 6 for help on centering a layout.
Set the margin on the body to be 1em on the top and 5% on the left and right.

Create a grid

Your starting point should look like step-2.html

We have to make the thumbnails line up in a grid. We have 8 thumbnails and we’ll align them in a 4x2 grid.
- To fit the thumbnails across the page in a 4x2 layout, each thumbnail should have a width of 25% of the total page width (100% ÷ 4).
- Set the width of each thumbnail li to 25%.
- You’ll probably only notice a change in length of the lines of text.
Make the thumbnails line up by floating each li to the left
Our images are breaking out of their containing boxes because they are too big. Images are one of the few content elements that will not reflow to fit inside their containers.
- Fix this by setting the max-width of the images to 100%. This will cause the images to never exceed 100% of their containing box.
Our thumbnail blocks are very big. Use the web inspector to look at one of the figure elements. Notice that it has a lot of margin applied to it. This is a browser default that is not getting reset by the reset.css (because figure is an html5 element).
- Let’s reset it ourselves by adding a margin and padding of 0.
- Once we’ve done this, our images will be larger and no longer be separated with a gutter.
- Add a gutter by giving a 1.33% margin on the right of each of the li items. This will cause our rows to only have three items, bumping the fourth one down.
Change the width of each li to 24%
Our elements are only lining up three across. This is because our width and margin together equals more than 100% of the container width, causing the last item to bump down a line.
```
24% * 4 + 1.33% * 4 = 101.32%
```
Because we added a margin to the right of each item, we actually added an unnecessary margin to the right of the last item in each row. Removing just this last margin will make our rows fit across the page.

We need to remove the margin on the last item of each row. We can do this using the nth-child pseudo-selector.
```
.thumbnail-grid li:nth-child(4n) {
  margin-right: 0;
}
```
- Every fourth item will have a right margin of 0.
- Read more about the nth-child pseudo-selector on CSS Tricks.
Our footer text is sneaking into the extra space in our grid. We need to make sure it clears all of the floats in our thumbnail grid. Use the clear property for this.
- Add clear: left to the footer.
Depending on page width, the Boskke cube image might be breaking the grid.
- This happens because we have a grid with variable heights. The caption length changes for each element. There are several possible ways to fix this:
  - Get rid of captions (probably undesirable)
  - Set a fixed height for each li block (could cause issues elsewhere)
  - Make sure captions are always the same size by more rigidly controlling the content (not always possible)
  - Use advanced CSS selectors to make sure we clear the floats for each row
- The last option is the most versatile so we’ll use it.
- We want to set the first item in each row to clear: left;. This is possible using the nth-child selector.
  
  See if you can figure out how to do this before moving forward.
- To get the first item in each row, we find the last item number of each row (4n) and then add 1. (4n+1).
```
.thumbnail-grid li:nth-child(4n+1) {
  clear: left;
}
```
- With this rule, the first item in each row will always clear all of the rows above it. The rest of the items will follow the first.
There should be more space between the thumbnail grid and the footer. Add a bottom margin of 3em to the ‘thumbnail-grid’.
- Notice how this didn’t actually do anything. Temporarily add padding and a background color to the class so we can see it:
```
.thumbnail-grid {
  margin-bottom: 3em;
  background: rgb(0, 0, 255);
  padding: 1em;
}
```
- Use the web inspector to look at the thumbnail-grid class. Notice how the thumbnail-grid container does not contain the actual thumbnails.
  
  This happens when all of the children of an element are floated. There are a few ways to fix this.
  - overflow: auto;
  - overflow: hidden;
  - float the container
- We’ll float the container here. Float the .thumbnail-grid to the left. See how the container now expands around its content.
- Remove the padding and background color.

Style the captions

Your starting point should look like step-3.html

We want to style the captions and price so that the price is on the right side of the thumbnail. We’ll achieve this by careful use of positioning.
- Start by styling the caption text to be .75em. Use the description class.
Absolutely position the price class to the top right.
```
  .thumbnail-grid .price {
    position: absolute;
    right: 0;
    top: 0;
}
```
That made all of the prices go to the top right of the browser window. This is because we positioned them absolutely, relative to the browser window. That is the default behavior with absolute positioning. Instead, we want to position them relative to the description.
- Add a background color to the description class to better illustration what’s happening. The price should be in the top right corder of that background color.
- In order to absolutely position the price relative to its container we must first create a positioning context. To do this, you have to set the position property on the elements container.
- In this case, the container is .description. We set its position to relative to set the context. This by itself does not have any visual effect on the page, but when combined with absolute positioning, it sets the context.
```
  .description {
    position: relative;
}
```
We want to make sure our text doesn’t overlap, so we’ll add a right padding of 25% to the description class. Then set the width of the price to 25%.
Right align the price text to make it look better.

Create an overlay on hover

Your starting point should look like step-4.html

When we hover over a thumbnail, we want a colored overlay to show over the picture with some text. Look at final.html for an example.
- We need to add markup to do this. First we need an element to be the colored block. We’ll use a span with a class of overlay. The text inside the span should say “View”. Add this immediately before the first image.
```
 <a href="#" title="View product details">
 <figure>
 
 <img src="images/clock_thumb.jpg" alt="alarm clock" />
 <figcaption>
 Analog Travel Alarm Clock Braun
 $40.00
 
 </figcaption>
 </figure>
</a>
```
- Style the overlay class to have a partially transparent background color, using rgba colors.
We want to position the overlay so that it is exactly the same size as the image. Set it to 100% width and height in the css.
- We need to absolutely postion the overlay over the image. Set the position of the overlay to absolute. What happens?
- This again, is relative to the browser window by default. We need to position the container relatively to set the positioning content on the overlay.
- Relatively position the containing element of the overlay (That’s the one that surrounds the overlay element). What happens?
The overlay now covers the entire figure element, including the caption. We only want it to cover the element. To do this, we need to create a new container for the overlay which only contains the element.
- Create a new container in the markup for our overlay. We’ll use a div since there is no semantic context for the container. Add a class of thumbnail to the div.
```
<a href="#" title="View product details">
 <figure>
 <div class="thumbnail">
 View
 <img src="images/clock_thumb.jpg" alt="alarm clock" />
 </div>

 <figcaption>
 Analog Travel Alarm Clock Braun
 $40.00
 
 </figcaption>
 </figure>
</a>
```
- Relatively position the new container. What happens?

Style the text on the overlay.

background-color: rgba( 255, 0, 0, .5);
color: white;
font-weight: bold;
font-size: 200%;
padding-top: 40%;
text-align: center;

Get rid of the tiny gap below the images. This happens because they are inline by default. Set our thumbnails to display block. Add a little margin below each image too.
```
.thumbnail-grid img {
    display: block; /* Get rid of tiny space below images */
    margin-bottom: .3em;
}
```
We only want the overlay to show when we’re hovering over the thumbnail.
- Hide the overlay by setting the opacity to 0.
- Use the hover pseudo class to set the opacity of the overlay back to 1 when we hover over it.
```
.overlay:hover {
    opacity: 1;
}
```
- If we just change the opacity when we hover over the overlay, nothing will happen when we hover over the captions. View this in the browser to see.
- Instead, we can create a selector that will change the opacity of the overlay when the li is hovered. This will include the caption.
```
.thumbnail-grid li:hover .overlay {
    opacity: 1;
}
```
To create a more smooth effect, we can use CSS transitions to make the overlay gradually fade in.
```
.thumbnail-grid a .overlay {
    transition: 1s all;
}
```

Finished Demo

Your finished thumbnail grid should look like final.html