Border Effect Resembling Windows Tiles

Question

Border Effect Resembling Windows Tiles

When you hover your mouse over a tile in Windows, a cool effect happens:

Hovering outside the tile, but within the container area:

https://i.sstatic.net/yZk9f.png

Hovering inside a tile:

https://i.sstatic.net/LoSmk.png

Hovering outside a tile at its mid point, causing opposite sides to light up:

https://i.sstatic.net/K65cL.png

I'm looking for a way to recreate this effect using CSS and/or JS. Here are some assumptions:

a) Tile positions are fixed
b) Row and column numbers can be accessed with JS
c) All tiles have identical dimensions
d) Container is fully filled with no empty spots

My Approaches:

Initially, I added a mousemove event listener on the container that looped through all tiles to apply the effect based on mouse position. However, this became slow with more tiles.

Next, I attempted calculations with mouse coordinates relative to the container to identify nearby tiles, but ran into issues, possibly due to incorrect math.

Summary:

Seeking a quicker method to replicate the Windows tile hover effect, even if it's a basic version as long as it looks visually appealing. Any help would be appreciated :)

javascript html css

Answer 1

Answer №1

Check out this creative workaround I came up with. While it may be a bit unconventional, it should get the job done:

const container = document.getElementById('container');
const glow = document.getElementById('glow');

container.addEventListener('mousemove', e => {
  glow.style.left = e.pageX + 'px';
  glow.style.top = e.pageY + 'px';
});

container.addEventListener('mouseenter', () => {
  glow.style.display = 'block';
})

container.addEventListener('mouseleave', () => {
  glow.style.display = 'none';
})

body {
  margin: 0;
  background-color: #111111;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  position: relative;
  width: fit-content;
  overflow: hidden;
}

#container>* {
  background: rgb(77, 77, 77);
}

#glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(#fff, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

#container .vertical {
  position: absolute;
  height: 100%;
  width: 8px;
  top: 0;
  background: #111111;
}

.vertical-one {
  left: 151px;
}

.vertical-two {
  left: 311px;
}

#container .horizontal {
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  background: #111111;
}

.horizontal-one {
  top: 101px;
}

.horizontal-two {
  top: 211px;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="glow"></div>
  <div class="vertical vertical-one"></div>
  <div class="vertical vertical-two"></div>
  <div class="horizontal horizontal-one"></div>
  <div class="horizontal horizontal-two"></div>
</div>

This solution involves creating a div with a white radial gradient that follows the cursor movements. The workaround includes using color-matching bars between each item, which isn't ideal for scalability but gets the job done.

Answer 2

Check out this creative workaround I came up with. While it may be a bit unconventional, it should get the job done:

const container = document.getElementById('container');
const glow = document.getElementById('glow');

container.addEventListener('mousemove', e => {
  glow.style.left = e.pageX + 'px';
  glow.style.top = e.pageY + 'px';
});

container.addEventListener('mouseenter', () => {
  glow.style.display = 'block';
})

container.addEventListener('mouseleave', () => {
  glow.style.display = 'none';
})

body {
  margin: 0;
  background-color: #111111;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  position: relative;
  width: fit-content;
  overflow: hidden;
}

#container>* {
  background: rgb(77, 77, 77);
}

#glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(#fff, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

#container .vertical {
  position: absolute;
  height: 100%;
  width: 8px;
  top: 0;
  background: #111111;
}

.vertical-one {
  left: 151px;
}

.vertical-two {
  left: 311px;
}

#container .horizontal {
  position: absolute;
  width: 100%;
  height: 8px;
  left: 0;
  background: #111111;
}

.horizontal-one {
  top: 101px;
}

.horizontal-two {
  top: 211px;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div id="glow"></div>
  <div class="vertical vertical-one"></div>
  <div class="vertical vertical-two"></div>
  <div class="horizontal horizontal-one"></div>
  <div class="horizontal horizontal-two"></div>
</div>

This solution involves creating a div with a white radial gradient that follows the cursor movements. The workaround includes using color-matching bars between each item, which isn't ideal for scalability but gets the job done.

Answer 3

Answer №2

The unique border and background styling known as the "reveal" effect is a key component of the innovative Fluent Design System. Fortunately, you're not alone in wanting to incorporate this eye-catching feature. Check out this helpful project: https://github.com/d2phap/fluent-reveal-effect. It offers a fantastic implementation of the reveal effect that functions smoothly.

For those inclined to tackle the challenge on their own, consider leveraging the mousemove event to track the mouse's movements. By calculating the distance between the mouse position and each element with the reveal effect, you can determine if they are within range for the reveal effect. Once an element is deemed close enough, create a circular gradient at the mouse's location and apply it as the background or border for all elements within the "reveal radius". This method should work effectively for managing numerous items simultaneously.

In addition to handling the mousemove event, be sure to address mouseleave and mouseenter events to prevent the reveal effect from getting stuck along the borders. Keeping tabs on scrolling events is also crucial to avoid the reveal effect lagging behind the user's actions.

An even more efficient approach (although the implementation may pose some challenges) involves creating an image where the reveal effect is illustrated as though it were one cohesive button. Subsequently, selectively "cut out" sections of the image to serve as backgrounds for buttons based on their respective positions. While this method offers enhanced performance, navigating the creation and application of such a surface to your controls might prove complex. In scenarios involving limited items, opting for the initial solution would likely yield better results.

Answer 4

The unique border and background styling known as the "reveal" effect is a key component of the innovative Fluent Design System. Fortunately, you're not alone in wanting to incorporate this eye-catching feature. Check out this helpful project: https://github.com/d2phap/fluent-reveal-effect. It offers a fantastic implementation of the reveal effect that functions smoothly.

For those inclined to tackle the challenge on their own, consider leveraging the mousemove event to track the mouse's movements. By calculating the distance between the mouse position and each element with the reveal effect, you can determine if they are within range for the reveal effect. Once an element is deemed close enough, create a circular gradient at the mouse's location and apply it as the background or border for all elements within the "reveal radius". This method should work effectively for managing numerous items simultaneously.

In addition to handling the mousemove event, be sure to address mouseleave and mouseenter events to prevent the reveal effect from getting stuck along the borders. Keeping tabs on scrolling events is also crucial to avoid the reveal effect lagging behind the user's actions.

An even more efficient approach (although the implementation may pose some challenges) involves creating an image where the reveal effect is illustrated as though it were one cohesive button. Subsequently, selectively "cut out" sections of the image to serve as backgrounds for buttons based on their respective positions. While this method offers enhanced performance, navigating the creation and application of such a surface to your controls might prove complex. In scenarios involving limited items, opting for the initial solution would likely yield better results.

Border Effect Resembling Windows Tiles

My Approaches:

Summary:

Answer №1

Answer №2

Similar questions

Adding Bootstrap component via ajax request

FInding the inner value of a Vuetify chip

Is it possible to create a stylish box for an HTML form?

Vue JS encountering Slack API CORS issue while using axios

Rendering DataTable content seamlessly from a different webpage using JavaScript without sacrificing control

The page you are trying to access does not support the HTTP request method 'GET'. Please try a different method to access the page

Retrieving data from a specific field within a table cell

What steps can be taken to stop the update function from inserting data into MongoDB from a Meteor application

Manipulating attribute values using Jquery

Need Some Help Reversing the Direction of This CSS Mount Animation?

What is the process for using the scrollIntoView function on an svg element like a rectangle?

Is there a more effective approach to managing an array of objects retrieved from an API call?

"Enhance your online shopping experience with a React.js popup modal for

Is it possible to use a += operator with attr() and val() functions in JavaScript?

Resizing cell height in an HTML table is not supported by Angular 5

JavaScript forEach functionality is not compatible with Dynamics CRM 2016

What is the best method for accessing OpenWeatherMap details via JSON?

An error is thrown when trying to retrieve Objects: Uncaught TypeError - Object function ParsePromise()

Center align `div 1` with CSS and right align `div 2`

Tips for updating the server without having to reload the page using vuejs