| title |
before |
folders |
after |
Project files |
After forking & cloning the repository to your computer you should have the following files:
|
| label |
type |
fancy-hover-boxes |
folder |
|
| label |
type |
indent |
images |
folder |
1 |
|
|
|
| label |
indent |
orange.jpg |
2 |
|
| label |
indent |
yellow.jpg |
2 |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
|
| label |
indent |
modules.css |
2 |
|
|
| label |
indent |
index.html |
1 |
|
| label |
indent |
notes |
humans.txt |
1 |
Citations for image usage |
|
|
*There’s also some HTML & CSS already coded so we can concentrate completely on making the hover boxes work.*
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Start some HTML |
The HTML boilerplate already exists for us, we just need to write the hover box HTML. Open up `index.html` and we’ll add in the HTML for the first hover box.
|
html |
index.html |
⋮
<body>
<section class="grid">
<div class="unit xs-1 s-1 m-1-2 l-1-4">
<a class="hover-box" href="#">
<div class="embed embed-3by2">
<img class="hover-box-img embed-item" src="images/orange.jpg" alt="">
</div>
<div class="hover-box-caption">
<h2>Orange butterflies</h2>
</div>
</a>
</div>
</section>
</body>
⋮
|
|
|
| num |
text |
6 |
Notice the `.hover-box` class is on the `<a>` tag—we’ll be styling that later.
|
|
| num |
text |
8 |
Another class here: `.hover-box-img` |
|
| num |
text |
10 |
And the final class here: `.hover-box-caption` |
|
|
If we were to refresh in the browser right now we’d see nothing. So we need a little CSS.
|
|
| title |
before |
multi_code |
after |
Style the basic box |
Because Modulifier is hooked up, let’s start by adding a bunch of those classes for styling.
|
| code_lang |
code_file |
code |
lines |
html |
index.html |
⋮
<section class="grid text-center">
<div class="unit [ xs-1 s-1 m-1-2 l-1-4 ]">
<a class="hover-box block relative crop" href="#">
<div class="embed embed-3by2">
<img class="hover-box-img embed-item" src="images/orange.jpg" alt="">
</div>
<div class="hover-box-caption island-1-4 w-1 absolute">
<h2 class="giga push-0 not-bold">Orange butterflies</h2>
</div>
</a>
</div>
</section>
⋮
|
| num |
text |
2 |
Add the `.text-center` class here to make all the text inside the boxes centered.
|
|
| num |
text |
4 |
Add the following classes:
- `.link-box` — makes the link `display: block`, to allow `<div>` tags inside, and removes the underlines from the text.
- `.relative` — because we’ll be using `position: absolute` inside the link.
- `.crop` — this will chop off the text labels because we want them to slide in when hovered.
|
|
| num |
text |
8 |
Some more styling classes here:
- `.island-1-4` — for a little space.
- `.w-1` — to make sure it fills all the way across.
- `.absolute` — so we can position this with coordinates.
|
|
| num |
text |
9 |
Finally some styles for the heading itself—they’re pretty self-explanatory.
|
|
|
|
| code_lang |
code_before |
code_file |
code |
lines |
css |
Now for a little bit of CSS applied to the `.hover-box`:
|
css/main.css |
⋮
.hover-box {
color: #fff;
}
.hover-box-caption {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
text-shadow: 1px 1px 5px rgba(0, 0, 0, .9);
}
|
| num |
text |
3 |
Though we can’t see the text, it will be white.
|
|
| num |
text |
7-8 |
Make the text a little more legible—though we still can’t see anything.
|
|
|
|
|
After typing out the above code, refresh in the browser and you see this single butterfly:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Make the caption visible |
Next up we’re going to add a hover state: when hovering the box the caption should become visible.
|
css |
css/main.css |
⋮
.hover-box-caption {
bottom: -4em;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
text-shadow: 1px 1px 5px rgba(0, 0, 0, .9);
}
.hover-box:hover .hover-box-caption {
bottom: 0;
}
|
|
| num |
text |
3 |
It’s important to define an initial location for the caption, here we’re setting it below the bottom of the image. And therefore it will be cropped off because of the `.crop` class we added earlier.
|
|
| num |
text |
8-10 |
When we hover anywhere on the `.hover-box` we want to target the caption and change it’s `bottom` position to `0`, making it align to the bottom of the image now.
|
|
|
Check it out in the browser:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
Add the caption transition |
Now let’s make this a little fancy with a transition on the caption. The `transition` will allow the caption to animate into it’s location instead of just popping into place.
|
css |
css/main.css |
⋮
.hover-box-caption {
bottom: -4em;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
text-shadow: 1px 1px 5px rgba(0, 0, 0, .9);
transition: all .2s linear;
}
⋮
|
|
| num |
text |
6 |
The `transition` property will allow any CSS numerical changes to animate. In this case only the `bottom` property changes, so it will be the thing that animates.
- `all` properties that change will be animated.
- `.2s` is the length of time the animation will take.
- `linear` is the type of easing, “linear” meaning “no easing”.
|
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after_video |
Add effects to the image |
Since this lesson is all about being “fancy” let’s fancify the image too. We’re going to make the image black & white, then when hovered it will become coloured and zoom in a little bit.
|
css |
css/main.css |
⋮
.hover-box-img {
filter: grayscale(100%);
transition: all .2s linear;
}
.hover-box:hover .hover-box-img {
filter: grayscale(0);
transform: scale(1.1);
}
|
| num |
text |
3 |
The `filter` property allows us to add a bunch of different effects to all HTML elements, including text. Here we’re using the `grayscale()` filter to desaturate the image into black & white. The `100%` specifies that we want complete greyscale, a lower percent would be less greyscale and have more colour.
**Make sure to spell “gray” the American way.**
|
|
| num |
text |
4 |
Since the `filter` is a numerical property we can totally transition it too.
|
|
| num |
text |
8 |
Undo the greyscale filter by setting it to `0`
|
|
| num |
text |
9 |
We can use the `transform` property to grow the image a little bit. The `scale()` function will allow us to grow or shrink HTML elements: `1` is what an element currently is, so `1.1` is just slightly larger.
|
|
|
|
|
| title |
before |
Finish off the rest |
Now that we have that single butterfly working it’s up to you to add the remaining butterflies.
**Add the following butterflies in this order:**
- <del>orange.jpg</del> *Done!*
- black.jpg
- blue.jpg
- yellow.jpg
*Each should be a new `.unit` inside the same `<section>` `.grid`*
Try ’em out. They should work great since the CSS is already done.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Fix the keyboard focus state |
If we `Tab` to each element in the browser we get the focus ring (the big black outline). It isn’t really ideal because it gets hidden behind the elements that come after.
So, with a little CSS we can make the focus ring work much better for keyboard navigation.
|
css |
css/main.css |
⋮
.hover-box:focus {
z-index: 10;
}
⋮
.hover-box:hover .hover-box-caption,
.hover-box:focus .hover-box-caption {
bottom: 0;
}
⋮
.hover-box:hover .hover-box-img,
.hover-box:focus .hover-box-img {
filter: grayscale(0);
transform: scale(1.1);
}
|
| num |
text |
2-4 |
When the `.hover-box` is focused we want it to move to the top of the pile, so let’s give is a higher `z-index`
|
|
| num |
text |
9 |
Add the `:focus` pseudo selector to the caption along with `:hover`—don’t forget the comma (`,`) between them!
|
|
|
| num |
text |
16 |
Add the `:focus` pseudo selector to the image along with `:hover`—don’t forget the comma (`,`) between them!
|
|
|
|
Wonderful! Some fancy-fied butterflies.
|
|