To get started let's enter in the hover animation and I just have my schedule.js file open and my schedule.scss file open. So the tag we want to deal with is slot_course because we don't want it to hover on slot empty. So when we are enrolled this tag will be available and it will have the styles that we styled up here. And real quick I'm just going to move these styles down to here and then I'm going to put the slot empty styles right above it.

And that way we can just put the hover one right after slot course so let's go ahead and type it out .slot_course:hover and we want to do this twice and the reason why is because we want to apply an animation to action, we don't want to have this be available, we don't want to see it if we're not hovering over as you can see in the completed app it's not there but when we hover it appears.

So we want to add that in when we hover over it and we can do that is by when hovering access the action and save opacity 1 and then let's get rid of this right here the course enrolled show content hide content on the action.

Because we won't be needing that because it's going to only appear if we are hovering over the action and we might actually need it, but let's let's try this out. So right about now we want to declare action with an opacity of zero so it's hidden at first. Save that and let's go into our browser here and let's add in a course, so our add button has disappeared. Let's check what slot_course our add button is going to be in our courseLibrary. All right and the reason being is because we have action here and it's set to opacity 0 unless we are hovering and we actually kind of want that.

So let's go ahead and add in style so that appears when we hover over one of these or it's selected. So we want to see that out and remove the opacity 0 but it's still there so that's why we're still able to select it. So in our course, let's go to our courseLibrary.scss and lets see what we should do here. So course hover we want to put our action here, let's put opacity to 1 that should fix it. Let's go ahead and see, and yes it's appearing.

And you also notice that it's automatic it doesn't really fade in. We can change that by just saying

.action {
    transition: all .3s ease;
}

That should work. Let's go ahead and reloaded and it's working great. Let's go ahead and make it so we can animate this. You'll notice that works for the remove course button in our My Schedule now. So we might as well put this in another file. The transition for the action because we're using it across components. Well, we'll do that in a guide where well clean up all of our css code so we'll leave that in there for now.

But let's go ahead and add in the animation for this. So back in our code let's close out courseLibrary and let's add in some code for our hover here. Let's go ahead and make it a more pronounced box shadow.

.slot_course:hover {
    box-shadow: 0 2px 10px 0 rgba(0,0,0, .21);
}

So that's going to give us a different box shadow then what we have. It's really subtle but you can see it. So let's go ahead and make it actually expand now. So lets say transform scale(1.05) and let's take a look and it's animating. OK now let's make it transition, so transition all .3s and ease now should be good lets reload that. And Okay yeah, that looks really good. Except for you'll notice that it doesn't animate back like it does in the completed app.

So go ahead and try to add that in without my help, go and pause the video and try to add in a transition to our action here, our slots here and let's see if we can do that.

OK so if you weren't able to do it the way you can do that is by just going on .slot_course and we actually have it already up here so let's type in a transition of all .3s of ease and that should work, let's go ahead and try it out. Yeah that's awesome, that works great. And let's see what else we can do for now and notice this is a lot. Well we're going to be changing this remove course to look a little different. See what the design has, I'm going to go to the preview mode which you have access to. This is in the guide notes below the Envision app design.

So it looks like it has an X. Let's see how we can add something like that while we'll include that in a different kind since that is more involved css attribute. So we have that working, we just need to add in the buttons here. So that is not a remove or add. We also need to fix the arrows because it's not lined up when it says remove but that will automatically work once we have in the circles with the X and the plus because they'll be the same width so we won't need to worry about that right now. This is working let's try and get this text in the center here because it's supposed to be centered and not at the top there.

So I believe we can do this with flex box, let's inspect this in the browser. Okay so this is slot_title we could do a couple things we could do one is use the absolute positioning that could work and we actually don't even need the slot_title because we are referencing the div in our slot. So we have our slot here and then we're just saying okay pick the div out. So let's just use that let's get rid of this slot_title and let's make sure we're not using it anywhere in our css. So if you hit command + shift + f you will be brought up this view and we can search in it.

Let's just search slot_title in there and see if we're using it anywhere to make sure we're not having any unnecessary code. So it looks like we're not using it anywhere.

And if you don't have that command shift f feature for any reason in Visual Studio code you can just hit the search right here and it will be and search app wide.

Okay, so we don't need that. Let's go ahead and find out how we can center this with the position. So position absolute top 50 percent, left 50 percent and then lets put transform translates -50 percent, minus 50 percent.

div {
    font-family: Lato;
    font-size: 16px;
    padding: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Let's check and see if that works. And it looks like it didn't. Got rid of our content. I'm going to change this position to relative and it looks like it changed that because it's relative to the parent container. Okay, let's just keep it like that and it is good to go. So change it to. Absolutely. You'll notice this is now going to be center in the screen. So if we hit command + f we can try and find it. Called UX for developers. All right, I can't find it but it's somewhere on the screen, it's probably behind everything lets use a z index and see if we can get it above everything. So I just put it in the z index of a really high number so we know it's on top

and basically with position absolute it's making it look at the entire window rather than just the container we're in. And you'll notice when we hover over it, it's coming back in probably because we have a different position set on the hover event.

Let's see what relative does, so it puts it right where we want it.

Let's actually search W3 css position attribute. Okay, I'm going to click on this one, okay so we have position absolute, let's see what they have to say about this. So we have static, default value elements render in order as they appear in the document flow, elements position relative to its first position not static ancestor element fixed and relative position. The element is position so left pixels adds 20 pixels to the elements left and initial sets it to it'sdefault value.

So with relative it seems to work and it was absolute that didn't work and not having it at all didn't work, I think it was initial are inherent. Yeah that didn't work either. So I just thought it might be a good idea to search these position properties just so you can kind of see how I go about things when I have questions about how things work to, when I'm wondering how things work in css, I'll generally just search W3 and then put the name of the attribute property and try and figure out how it works exactly. So I just thought I might include that but yeah that centers it well. We have our hover animation let's see what we have to add to the styles. Okay, so it looks like all we have to add is a little bit of spacing up there and a few other things so spacing above all this course content.

So if I inspect this you're not going to be able to do this because this is the app I built we see that it's the list and it has a margin of 0.25. We've probably already added that and it looks like the way I accomplished this initially was by giving the bottom a padding of 25 pixels. Let's go ahead and do it to the list tag instead. So if I remove this padding from margin bottom of 50 pixels that's where we're getting let's go ahead and remove that and let me see if we can get that on the list here.

OK. So I'm going to add in a margin top of I can't remember what it was 55 pixels interesting. OK. That's thats not working because we have that, let's just add that in right here 45 pixels and yeah it's the same effect.

I'm just going to get rid of that so it's back to normal and I'm going to see what it was on here in the header. So for the h1 it was 50 pixels. So let's just do 50 pixels and let's apply it to our list. So let's go to our main.scss and we'll find our list here. And let's just say margin top 50 pixels that should give us the same effect. So it gives us nearly the same exact effect. There's something else that's causing this to not line up exactly but it should be giving us the exact same effect. If we were to delete that and apply it to the H1 like I did originally so margin bottom 50 pixels.

h1 {
    margin-bottom: 50px;
}

It should still have that little difference, so yes it does still have that little subtle difference so that's probably because of just something else we styled differently. But yeah that is how we can get that in let's delete that and apply it to the list. You can do it how ever you want and lets see what we've got in our app. So one thing you're missing is the check mark here.

So we're missing the check mark, we're missing these add and remove buttons and then the X on our schedule cards and that should be it for styling. Let's go ahead and put aside the styles for now and let's get more into the calculation of all this because we need to have a display as the first option the UX for Developers. And when we add this we want it to come after and we'll do that in the next guide. But real quick let's enter in the content for this. So over here on the trello board I don't think you have access to this but I will copy and paste all of these into the guide notes so you have access to these so you can just copy them in.

Let's see what we don't have. We dont have UX and up and running. Let's go ahead and get that one and I will just skip through this part since you have them all available. I'll just end the guide here and then in the next guide we'll have all of those in so just copy those in and then we'll talk a little bit about adding the courses and then we'll get the logic taken care of for adding in these courses properly so they show up in the correct manner.

All right, so that's it, lets commit our code I'm going to hit command j to open my terminal here. I'm going to type git status, git add ., git commit -m "added hover styles and list styles", git push origin master and I will see you in the next guide.