We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨

The ustwo background changing hover effect


September 28th 2017



Posted by

Lawrence Gosset

This week, we look at how to make other parts of the page change on hover. With CSS we can only change the tag or inside the tag on hover, but with a bit of Javascript, we can change completely different parts of the page.


- Okay what we're gonna build in this little videois this hover effectthat has been used on a few different sitesprobably most popularly on the Us Two website.So if you go to the menuthey've got this kind of nice overlay effectand when you hover over each individual menu itemthe background changes to a different gradient.So it kind of uses this fade effect to do that.So I've already gone aheadand prepared the html and CSS for thiswhich I'll just run over quickly firstjust to give you an idea of how it's put together.But we're gonna focus purelyon the actual JavaScript side of thingsto how we can trigger the backgrounds change dynamicallywhen we hover over each item.

So this is my version of the menuit's pretty much the same kind of design.We're not worried too much about that.We're focusing more on the functionality aspect of it.So what we have here iswe firstly have a div which contains everything on the pageand inside of our div we have a nav elementso that nav contains firstly the menuwhich is for each of these individual items.See you can actually see it's working here.We'll get to that stage by the end.Inside of our menu you've got uland then these li elements so that stands for list item.And then inside of that we have just the linkfor each individual page.

Separately to our menu what we've also gotare these overlay divs.So these are just divsthat are covering the full width and heightof the background and each one has a different class name.

So we've got this class of overlay-bgso bg is just short for backgroundand then which particular link it relates to.

So we've got one for the home page,the courses, the book, about page, and the contact.Now one thing that I've gone ahead and addedto each of our links is this little data-overlay attribute.

So these data attributes allow you to attach extra bitsof information to elements that you could usemostly for JavaScript purposes.So what I've done here with the actual valuefor this attribute is I've given it the class nameof the overlay that it relates to.So you can see here for our courseswe've got .overlay bg courseswhich would pick out this class name here.Same for book about and contact.

So just to look quickly at the CSSprobably easier to do it through the inspector.

So firstly what we've gotis our div with a class of model.

So this is fixed onto our pageso it's gonna stay on our view port.Its taking up 100% of the width 100% of the heightand it's fixed in the top left.I've also used a display of flexand the reason I've done thatis so that for the menu which is inside of our model

I can use margin auto on the top and the bottom edges.So normally you can't do thisbut when you use flex on the parent elementit allows you to do that.So I'm just implying a marginof auto on the top and the bottomso it's centered verticallyand then 10 vw.

So vw stands for view port widthso if you chop up the width of this pageinto 100 different pieceswe have 10 of those on the left hand side and the right.So as we make it smaller it kind of shrinksin proportion to the size of our screen.So the vw stands for view point width.We've also got vh which stands for view port height.So really really useful measurements.We talk about these quite a bit in the eight week courseespecially in the first weekwe deal with some kind of fixed positions and full widthand height backgrounds.

So they're really really useful.What we have in addition to that after our menuis each of these overlays.So with our overlay we're doing the same kind of ideawe're positioning it using absoluteso we're kind of positioning itinside the context of our modelwhich is the full size of our page.So overlay background's also taking up the full widthand height for the background of the page.

The only thing that it's got in addition to thatis just the backgroundsso background here what we're usingis this linear gradient syntax.So this looks a little bit funky.I could never actually remember this off the top of my headso a quick google search for CSS gradientswill get you where you need yo go for that.And what I actually used to get these gradientswas something called uigradients.comso this is just the gradient generatorreally good for gettingsome nice kind of subtle color shifts.There's also some pretty awful onesbut they're a mixed bag.So I just kind of went throughfound some nice relatively dark onesand I just use the get CSS function here.It returns me back the gradient syntaxand then I've just basically copied that into the project.The only bit where I made it differentif you look here it says firstly to rightso the way that the gradient syntax worksfirst it gives it a directionthen the color it starts from and the color it goes to.And you can put any number of these colors in thereso you can have like ten different onesbut most of the time when you're dealing with gradientsyou kind of never really havemore than three or four gradient stops.And you can give these percentages and things.It's quite an advanced syntaxwhich is why I could never remember off the top of my head.So what I went and did is just applied rather than to rightI gave it 45 degreeswhich means it's going to go horizontallyfrom the bottom left to the top right corner.So it's a nice horizontal gradient.So for each of these different overlaysthey have a class name which is differentso I just appliedyou can see this bit changing herethe background gradient of each one.

And then the last thing that we have is this opacity.So by default on our overlay background divsthey are set with an opacity of zeroapart from our first one.So if we look at our first one hereit's got a class of visible as well.

So when we add and remove this class of visiblewhat it's gonna do is it's just gonna add the opacityonto our particular background.And then we're using a transitionto ease that opacity in and outso we get nice subtle effect as we move between them.

Okay so let's move into the actual JavaScript for thisand kind of break it down to seehow we can achieve this effect.So I've gone ahead and in my index.htmlI've downloaded jquery from the jquery website.I've dropped that in here just as it is.You don't need to actually touch thatyou can just put it in there and leave it.And then I've also added this menu.js.So I'm gonna go ahead and I'm gonna remove that code.We're gonna start it from scratch.So once that's saved you'll see that actuallylet me give the page a refreshno its still workingif I just put in something like overlayhopefully it should there we goso this is what it's going to be doing by defaultand we're going to get it so thatwhen we hover over each onewhat it's going to do firstlyis every time we hover over a linkwe want to run a function.

Secondly inside of our functionwe want to find outwhich overlay we want to show.

Thirdly we're going to remove the visible classfrom all of the overlaysand then lastly we need to add the visible classonto the overlay we have just hovered.

So the useful thing about htmlis we've got a bit of information taggedto each of our links that relates to the overlaythat we're going to trigger.So firstly in your menu.js what we're gonna dois we're going to sayfor our navigation linksso we have the li's with a class of navigation linkwe'll say .navigation link and then aso we're actually grabbing the linksthat are inside of these li tags.

We're gonna say every time we hoverso jquery has this .hover function built in.

What are we gonna do.We're gonna run a functionand our body of the function is gonna go in here.So we can put in a quick console.logso it's gonna send ourselves a messagejust to check that things are workingand we're gonna say you have hovered.

So I like to do this first and foremostjust to check that my function is actually runningwhen it's supposed to.So for that I can boot up the console.Let's just get rid of this arrow.And it's saying you have hoveredso every time I hover over a linkI'm getting lots of these messages so that's good.It's working for us.

So every time we are hovering over a linkwe run a function, yep we've ticked that one nicely.So secondly inside of our functionwe want to find out which overlay to show.So the way that we can grab the actual elementthat we've just clicked onis by using something called the this keyword.So if instead I put in this into my console.logwe'll see something very differentcome into our console here.So you can see when I hover over each of these linksit's giving me back the actual elementthat I've just hovered on.So this is very very usefulto be able to attach our functionalityto the context of whatever particular thingwe've interacted with.

So the this keyword very good in JavaScriptrelates to the thing that we've just clicked on.So we're gonna set up a variable here.A variable is a way for us to store a bit of informationto reuse again later.

We're gonna say var and we'll call it linkand it's going to be equal to our linkthat we just clicked on.And we need to put it inside of our dollarand round bracketsso it turns it into a sort of jquery version of an elementthat we can then work with.

So what we can do next is to grab the overlay.So attached to each of these linkswe have this data overlay attributeand the way that we can grab thatis by using something called the data method.

So if we say var overlay and it's going to be equal to link.Look link is equal to thisso we're essentially saying the same as that.We can say link and then .data and then overlayand if we put a console.log in here and we say overlaylet's see what we get back now.

So this is now grabbing that particular data attributefrom each of these links and it's just giving it back to us.So this is very very useful bit of informationand what we're going to do with thatis we're going to sayfirstly we're gonna grab all of our overlay elementsso this is a little bit tricky to seeI'll just zoom in a little bit hereso you could see we've got this class of visibleso what we want to do firstis we want to grab all of our overlay background imagesand we want to remove the class of visible.So we're gonna say .overlay-bg remove class visibleand we'll see what that does now.

What it's done is it's removed the opacityso you can seewe now just got a white background on the pageand to take it a step furthercause we've got our new overlay elementwhat we're gonna say is dollarand in the brackets we're gonna put the actual class nameso you remember this is equalto one of these class selectorsand then we're going to add the class of visibleto the current one that we've just hovered over.

So let me just write some comments in hereto explain quickly what's going on.So firstly this refers to the current linkwe've just hoveredhere we grab the data overlay attributewhich refers to the class of the overlaywe want to show.

Firstly we hide all of the overlaysby removing the visible class.

Lastly we add the visible class to the overlaywe have just hovered.

So let's see how this works out for us.

So it's working.To have a little look in the CSSso we're in the htmlyou can see that these things are going purplewhen they go purple it means something's actually changingand what's happening is it's firstly going throughall of these overlay-bg elementsremoving the visible classand then it's adding the visible classback onto the one that we've just hovered over.So that's essentially how it works.It's a four step kind of process.If we're gonna break it down logicallythat's how we'd do it.One last thing that we can do here is just on our functionwe're gonna say return falseso this is a little trickthat will block the default browser behaviorso usually we put this return false in placewhen we're using things like click functionsso if you had a link that goes to a certain pageand then you had some jquery or JavaScript codeand then use return false it would block that linkfrom actually following the href attribute.

So that's it I'm gonna put the code up for thisboth as a published project and also I'll put it on GetHubso you can just copy and paste that into your own projectbut then what I suggest doing is working throughand doing the JavaScript side of it yourself.And then feel free to tweak thismake it your ownby no means this is a perfect design.It's really intended to be expanded onexperimented with.So yeah hopefully it was helpfuland in the next video what we're gonna dois instead of having gradientswe're gonna have a background imagethat's gonna fade in and out.So we're gonna kind of change it up a little bitgive it a little bit of a different style.


September 28th 2017



Posted by

Lawrence Gosset

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration