# Creating Visual Interest: How to Use MouseMove Hover to Reveal Background Images

Canva celebrated [15 billion designs](https://www.canva.com/newsroom/news/15-billion-designs/) on its platform on February 15, 2023, marking a huge milestone for the company. To celebrate the event, the company created a special background image featuring designs made on the platform. When you move your mouse around the page, the image gets revealed, creating a cool effect. I found it interesting and decided to recreate it using HTML, CSS, and JavaScript. This article will show you how to recreate the effect step by step.

![Canva homepage celebrating 15 billion designs](https://cdn.hashnode.com/res/hashnode/image/upload/v1677444574615/b4aae5bc-82fe-4edc-b102-850b720a42b2.gif align="center")

## Prerequisites

This article assumes you have a basic knowledge of HTML, CSS and JavaScript. You'll also need a code editor and a web browser. I'll be using VS Code and Chrome, but you can use whatever you like.

To follow along, clone or download the starter files [here](https://github.com/israelmitolu/Reveal-Background-Image-Mousemove)

## Getting Started

First, create the HTML markup for the container and background image. The container is where the background image will be revealed on hover.

```html
<div class="container">
  <h1>Thanks for <u>15 billion designs!</u></h1>
  <input type="text" placeholder="Search your content or Canva's" />
  <div class="hover"></div>
</div>
```

The container is where all the content will be. The `hover` div is empty for now, but we will add the background image using CSS.

## Styling the Container

Next, copy the following CSS into the `styles.css` file. This will style the container and the other elements in the app.

```css
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
  width: 100%;
  height: 25rem;
  background: linear-gradient(
    119.42deg,
    #cc00c4 8.94%,
    #7d2ae8 54.02%,
    #00c4cc 95.49%
  );
  border-radius: 8px;
  text-align: center;
  padding: 0.5rem;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-size: 3rem;
  position: relative;
  z-index: 10;
  margin-top: 1rem;
}

input {
  position: relative;
  margin-top: 2rem;
  padding: 9px 4px 9px 40px;
  border: 1px solid #2b3b4a4d;
  outline: none;
  color: #0d1216;
  padding: 0 12px;
  font-size: 1rem;
  border-radius: 4px;
  height: 2.5rem;
  width: 40rem;
  max-width: 100%;
  z-index: 10;
}
```

In the CSS above, we set the container to `position: relative` so that we can position the background image inside it. We also set the `overflow` property to `hidden` so that the background image doesn't overflow the container.

We also set the `z-index` property of the `h1` and `input` elements to `10` so that they appear above or on top of the background image.

Here is what we have so far:

![Static website Design that reads Thanks for 15 billion designs!](https://cdn.hashnode.com/res/hashnode/image/upload/v1682688423424/16f7a390-9a78-4136-bc62-32c9643d8d50.png align="left")

## Adding the Background Image

Next, we'll target the `.hover` class and add the background image. We'll also set the `position` property to `absolute` so that we can position the image inside the container.

Copy the following CSS into the `styles.css` file:

```css
.hover {
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  width: 10rem;
  height: 10rem;
  background: url(img/giphy.gif) 50% 50% fixed;
  border-radius: 50%;
  box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.15);
  filter: blur(1px);
  z-index: 5;
}
```

The `opacity` property is set to `0` so that the image is hidden by default. We'll use JavaScript to change the opacity to `1` when the user hovers over the container.

Additionally, for the `background` property, we used the shorthand syntax to set the background image, position, size and repeat. We also set the `fixed` value for the `background-attachment` property so that the image stays in place when the mouse moves around.

If you prefer, you can use the longhand syntax to set the background image, position, size and repeat:

```css
background-image: url(img/giphy.gif);
background-position: 50% 50%;
background-attachment: fixed;
```

## Revealing the Background Image

To reveal the background image, we'll use JavaScript to track the movement of the user's mouse cursor and change the opacity of the background image.

Create a new file called `app.js` and add the following code:

```js
const hover = document.querySelector(".hover");
const hoverWHalf = hover.offsetWidth / 1.5;
const container = document.querySelector(".container");

container.addEventListener("mousemove", (e) => {
  hover.style.left = e.pageX - hoverWHalf + "px";
  hover.style.top = e.pageY - hoverWHalf + "px";
  hover.style.opacity = "1";
});
```

In the code above, we first select the `.hover` and `.container` elements using the `querySelector` method.

Then, we add an event listener to the container element. The event listener listens for the `mousemove` event, so that whenever the user moves their mouse over the container, the code will calculate the position of the `.hover` element and update its `position` and `opacity` dynamically.

Specifically, it calculates the horizontal and vertical midpoint of the `.hover` element using the `offsetWidth` property and then subtracts half of this value from the `pageX` and `pageY` properties of the mousemove event to determine the position of the .hover element relative to the mouse cursor.

Don't forget to link the `app.js` file inside the `index.html` file ;)

```html
<script src="app.js"></script>
```

With this, we have successfully created the mousemove hover effect. Here is the final result:

Check out the [live demo](https://reveal-background-image.netlify.app/) and source code on [Github](https://github.com/israelmitolu/Reveal-Background-Image-Mousemove).

![Our Replica of the background image reveal effect](https://cdn.hashnode.com/res/hashnode/image/upload/v1682689958479/be534455-5a5e-484a-9983-25c5034e2e71.gif align="center")

## Conclusion

And there you have it! You've made it to the end of this article on creating visual interest using the MouseMove hover effect with HTML, CSS, and JavaScript. By now, you should have a good understanding of how to use this technique to add some excitement and creativity to your website.

Remember, there are countless ways to customize this effect and make it your own. Don't be afraid to experiment with different images, colours, and animations to create a look that perfectly matches your brand or personal style.

As you continue to develop your web design skills, be sure to keep an eye out for new and exciting trends in the industry. Who knows, you might just discover the next big thing :)

---

Thank you for reading! I hope you found this article helpful. If you did, kindly like and share it with your friends and colleagues :)

I would love to connect with you on [**Twitter**](https://twitter.com/israelmitolu) | [**LinkedIn**](https://www.linkedin.com/in/israeloyetunji/) | [**Github**](https://github.com/israelmitolu) | [**Portfolio**](https://israelmitolu.netlify.app/).

## Resources

* [Using Custom Cursors with JavaScript for a Better UX](https://israelmitolu.hashnode.dev/using-custom-cursors-with-javascript-for-a-better-user-experience)
    
* [How to Center an HTML Element Using JavaScript](https://hibbard.eu/how-to-center-an-html-element-using-javascript/)
    
* MDN Web Docs - [mousemove](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)