Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML
Webdesign

A Quick Full-Screen Hover Effect With CSS and JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

In today’s quick tutorial we’ll learn how to build a useful full-screen background hover effect.

As the saying goes: “a picture is worth a thousand words”, so let’s have a look at what we’re going to create:

In a real world scenario you might use this kind of effect as a quick view modal for your products, portfolio items, photos, and so on. Let’s get started!

1. Begin With the Page Markup

We’ll start by marking up just two elements:

The .bg element will be an empty element.

The .container element will hold the page contents. Inside it, we’ll put four links. We’ll associate each link with an image via the custom data-bg attribute like this:

2. Add the CSS

Let’s continue with some basic CSS.

We’ll give the .container a maximum width and horizontally align its contents:

For stylistic reasons, instead of the default text-decoration: underline property value, we’ll use a border-bottom to underline the text links:

Coming up next, we’ll define the ::before pseudo-element for the links. This will initially be hidden. It will appear with a “shutter out” horizontal effect, each time we hover over its parent link.

Its initial styles:

The .bg element will be also visually hidden by default (opacity: 0). Plus, it will be absolutely positioned and cover the full width and height of its container (in this case the body).

Here are its initial styles:

3. Adding the JavaScript

Preload the Images

With the HTML and CSS in place, the next necessary step is to preload the data-bg images. We’ll do that with just a few lines of code:

This code iterates through all the page links, grabs the value of each one’s data-bg attribute, and creates a few img instances by using the Image() constructor.

So now if we reload the demo page and look at the Network tab of our browser inspector, we’ll see that all images have been downloaded/preloaded:

Showing the background images in the Network tab of our browser

This is a vital action for preventing the white flash that would occur the first time we hover over a link. Without preloading, at that point the browser won’t yet have downloaded the image and it might take a while until the image appears. 

If you want to test this behavior, first comment the aforementioned code, then open the Network tab and reload the page.  

Toggle the Images

Each time we hover over a link, we should do the following:

  • Grab its related image which is stored in the data-bg attribute.
  • Set that image as the background image of the .bg element.
  • Add the bg-show class to the body. This class will ensure two things. Firstly, that the .bg will appear with a fade-in effect and sit on top of every element, apart from the active link. Secondly, that the pseudo-element of the active link will appear with a shutter out horizontal effect.

On the other hand, every time the cursor leaves a link, we’ll remove the bg-show class from the body and the .bg will disappear.

Here’s the corresponding JavaScript code:

And the related styles:

Conclusion

That’s all folks! With just a few lines of code we managed to create an interesting full-screen background hover effect.

Hopefully you enjoyed the demo and have taken inspiration for building something similar in an upcoming project.

As always, thanks a lot for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.