# Windows 10 Calendar Hover Effect: A Step By Step Tutorial

# HTML Structure

Let's start by creating the HTML structure, We will create four boxes only to keep this tutorial simple.

```xml
<div>
  <div class="container">
    <div class="box">
      <div class="box-content">1</div>
    </div>
    <div class="box">
      <div class="box-content">2</div>
    </div>
    <div class="box">
      <div class="box-content">3</div>
    </div>
    <div class="box">
      <div class="box-content">4</div>
    </div>
  </div>
</div>
```

# CSS Styles

```css
body {
  background-color: #111;
}

.container {
  gap: 8px;  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: min(90%, 300px);
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
}
```

# Creating the Gradient Effect

Next, we will create a gradient effect on our boxes using the ::after pseudo-element by using the radial-gradient function to create a circle gradient inside of all the boxes.

```css
.box::after {
  content: "";
  height: 100%;
  width: 100%;
  transition: opacity 500ms;
  background: radial-gradient(
    600px circle at 0 0, 
    rgba(255, 255, 255, 0.6),
    transparent 20%
  );
  position: absolute;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682324523952/bd1acf7c-306d-4a0b-aae8-94f25de4f00f.png align="center")

# Make the Gradient follow the mouse

For this one we will have to use JavaScript:

```javascript
document.body.onmousemove = e => {
  for(const date of document.getElementsByClassName("box")) {
    const rect = date.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

    date.style.setProperty("--mouse-x", `${x}px`);
    date.style.setProperty("--mouse-y", `${y}px`);
  };
}
```

The code above loops through all the boxes whenever the mouse moves and takes the position of the mouse. It then sets two CSS custom variables (`--mouse-x` and `--mouse-y`), which we can use to position the gradient inside the boxes.

We can now use the (`--mouse-x` and `--mouse-y`) custom variables in our CSS to position the gradient based on the mouse position:

```css
.box::after {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.6),
    transparent 20%
  );
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682324634508/d98a7bf5-aac4-4e61-9887-431660bede63.gif align="center")

# Covering the Gradient up

At this point, the gradient glow effect is working but you can see the whole gradient when moving the cursor and we only need it to be visible a few pixels on all sides to create the border effect.  
  
We can fix this by using the box-content div to cover it up:

```css
.box::after {
 z-index: 1;
}

.box-content {
  background-color: #111;
  position: absolute;
  z-index: 2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

We set the `background-color` of the box content to match the background color of the page and set the `z-index` higher than the ::after pseudo element (gradient) which puts it below the box-content.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682407892439/11cf4ab0-cbc6-4418-b5a3-418ce64b3d48.gif align="center")

Now we have to set the `inset` property to `3px` which makes the gradient only visible 3px on all sides of the box-content which creates a border-like effect.

```css
.box-content {
  inset: 3px;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682324645777/7dd9912e-3ad6-47f4-bd90-ae93f33e6a21.gif align="center")

# Making the border lighter on hover

Finally, let's add a simple hover effect in the div with box class to make the border lighter when we hover over the boxes.

```css
.box:hover{
  background-color: rgba(255, 255, 255, 0.4);
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682324676022/b3f0e1ca-5ff0-499a-b451-ad1ba08c3802.gif align="center")

Here's the codepen [link](https://codepen.io/alicalimli_dev/pen/YzOBzNv)

That's it you just learned how to achieve this awesome hover effect, I hope you found this one helpful and If you have any questions or comments please feel free to leave them below.