Transcript
In this lesson, we will be focused on the "Tour Packages" section where we will add the planet images and this hover effect and also the background starry sky image with a gradient.
Our first step is to swap our existing images for the real images, which are now available in lesson 10 in the GitHub repository.
So my first image here is for Mars. so let's swap out this placehold.it URL to point at our image directory and the Mars jpg photo.
<div class="card__img" style="background-image: url('img/mars.jpg')"></div>And you can see we've got that one updated. We'll go ahead and copy this and update for the other planets as well.
Our next step is to add the hover effect as can be seen on the live demo. To accomplish this hover effect, we'll use one of my favorite tricks which we also used in the header which is to layer a box-shadow over top of the image.
So we'll begin by adding box-shadow and setting this to inset. Unlike our header image, we want to limit the spread and the blur on this whereas our header image we were using box-shadow as a flood color. We will set 0 for the X, 0 for the Y, 30 pixels for the blur, and 60 pixels for the spread radius, and then use a variation of our brand blue.
box-shadow: inset 0 0 30px 60px rgba(21, 15, 100, 0.3);On save, you can see that this color now appears around the edges of our image, leaving a place in the middle free of any color. This is due to the combination of our blur and spread radius being less than the total width or total height of the image.
Now we need to create the hover effect, and we want the effect to occur not just on hover of the image but when any area of the card is hovered.
So for our rule, we will set that the card class on hover should then make changes against the card image, and specifically we can repeat our box-shadow declaration. and we will just simply change the blur and spread radius. We're going to knock this down to 10.
.card:hover .card__img {
box-shadow: inset 0 0 10px 10px rgba(21, 15, 100, 0.3);
}On safe let's see what that looks like.
You can see that there's a bit of a reveal happening, most noticeable on our Mars image due to the brightness. But it's happening very suddenly. We can add what's called a transition to provide an animation to that transition. This will be added on the card__img class. Adding it on the card__img class means that the transition will take place both when someone hovers into the element and out of the element.
The property name is transition and we will specifically say that we expect a transition on the box-shadow property. We'll set the duration of the transition to 80 milliseconds, and then we have the option to do some easing function. We won't get into the specifics of what an easing function is, but for this purpose we'll use ease-in-out.
.card__img {
/* ...existing styles */
transition: box-shadow 80ms ease-in-out;
}On save, you can see a bit of animation now happening between the default state and the hovered state of our box-shadow. If I hover later in the card, you can see that it doesn't matter where I enter the card, the transition happens.
Our next step is to add the background as seen on our final project. If we take a look at our HTML, here's the "Tour Packages" section, but as we discussed when we designed the "About" section, we need some sort of identifier to attach our classes to. So for the "About" section we added the id of about, we'll do something similar and add the id of tours. Now can style specifically this section based on id.
Just like we learned when defining the "About" styles, we know that an id selector starts with a pound sign and then our id name. And the first thing you want to do is add the background image. So we will define background-image with the URL pointing at our img directory and the starry sky image.
#tours {
background-image: url(img/starry-sky.jpg);
}And on save, a couple of interesting things have happened. While clearly we've had an error here because we want the image to spread edge-to-edge, let's take care of the card issue first. We can fix this by explicitly defining the background color for the card, so we'll set background color to #fff which is white.
.card {
/* ...existing styles */
background-color: #fff;
}All right, glad to have that resolved, but now how do we fix the spacing issue? Let's take a look back at our HTML.
Looking at our setup, you'll notice that we placed the wrapper class which limits width on the main element, and this main element is wrapping both the "About" section and the "Tour" section which is causing this limited width. So instead of placing it on main, we need to remove these classes.
We've attached our background-image to the "Tour" section, but we want to limit width on its contents. So we can create a new div inside of the section and add those classes here instead, and use this div to wrap just the inside content of the "Tour Packages" section.
And on save, you can start to see that we have retained the limited width while allowing the background image that is attached to the outer section to span edge-to-edge of the browser.
But we also need to jump back to the "About" section and add these classes as well. Since our "About" section doesn't have an overall background image, we can go ahead and update its existing classes to add the wrapper and center class and our alignment there is resolved.
Now you can see that some of our spacing is still not correct. And looking at our final project we have an additional effect here. This is created with a CSS gradient, and that is helping resolve the contrast and therefore legibility of the "Tour Packages" title.
Looking back at our rule that we have already for the "Tour" section, how are we going to resolve having both a gradient and a background image?
CSS gradients are actually defined as a background-image and CSS lets us define multiple background images. We can actually define our gradient as the first item to be displayed as a background image. And defining it first means it will be layered on top of our starry sky image. We need to add a comma between the gradient and the URL.
#tours {
background-image: linear-gradient(
-20deg,
rgba(121, 147, 221, 0.5) 20%,
rgba(251, 169, 195, 0.9) 100%
), /* ...existing img */ url(img/starry-sky.jpg);
}I have added in a linear-gradient and designated that the direction should be -20 degrees, and that it should use kind of a dusky blue version of our brand blue set to 50% alpha transparency up until 20% of the total space that the gradient is allowed to fill. And then followed that with a dusty pink set at 90% alpha transparency to take up the remaining space allowed to the gradient.
On save, you can see that thanks to the degrees, we have a bit of a diagonal gradient happening that fades from our dusty pink to our dusty blue.
The final issue to resolve is why we have extra space down here.
Jumping back to our HTML one more time, we see that we have used a margin class on our "Tour" section, so this is placing space outside of the "Tours".
This is is a quick fix - you may already know! - to switch this to padding instead. And now the extra space that we still want is defined inside of the element.
In review, to add images to the "Tour Packages" section we updated the background-image URL within the HTML to point to each of our planets. Then added a :hover effect that included a transition for animation to add a box-shadow across our images. And then applied a full-width background image to the "Tour Packages" section that also included a linear-gradient.