CSS magic card hover interaction effect

A product with a perfect user experience is inseparable from the great contributions made by interaction designers. The daily life of interaction designers is inseparable from unique thinking habits and long-standing design methods. These seemingly simple and inconspicuous rules are very likely to be the factors that determine whether a product can stand out in a huge market in the future.

Today I visited the website and saw a good interactive design. The text will expand to explain the CSS code implementation process. The final effect is shown in the GIF below. In order to reduce the size of the GIF, the content in the card is removed.

This kind of card appears in the major official websites more, introducing the type of product, the function of the system, the price level and so on. However, many of them are pure card displays, without any interactive feedback to the user, but as shown in the figure above, an aperture that follows the mouse movement is given in the process of the user's mouse movement, thus giving a sufficient amount of user feedback, User experience has been greatly improved.

Implementation process

JS code

To be able to move with the mouse, the premise is to obtain the X/Y axis coordinates of the mouse. This needs to be obtained with the help of JS, to obtain all card elements, and to calculate the content of each card by monitoring the mouse movement event onmousemove The aperture coordinate value of , here is set by CSS custom properties --mouse-x and --mouse-y to the inline style of the card, which will be used in CSS later, the overall code is as follows:

 document.getElementById("cards").onmousemove = e => {
  for(const card of document.getElementsByClassName("card")) {
    const rect = card.getBoundingClientRect(),
          x = e.clientX - rect.left,
          y = e.clientY - rect.top;

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

CSS code

In order to ensure the simplicity of the code, it is created based on pseudo-elements, mainly by setting the radial-gradient() function to create a radial gradient aperture, and then combining the settings in the JS above --mouse-x and --mouse-y can make the interface move with the movement of the mouse. code show as below:

 .card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
}

In order to make the interface effect more after , two before -elements are used in the example website to set different radius values. The overall CSS code is as follows:

 :root {
  --bg-color: rgb(20, 20, 20);
  --card-color: rgb(23, 23, 23);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;  
  max-width: 916px;
  width: calc(100% - 20px);
}

#cards:hover > .card::after {
  opacity: 1;
}

.card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  height: 260px;
  flex-direction: column;
  position: relative;
  width: 300px;  
}

.card:hover::before{
  opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
}

.card::after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.3),
    transparent 40%
  );
  z-index: 1;
}

.card > .card-content {
  background-color: var(--card-color);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  inset: 1px;
  padding: 10px;
  position: absolute;
  z-index: 2;
}

HTML code

 <div id="cards">
  <div class="card">
    <div class="card-content">***</div>
  </div>
  ***
  <div class="card">
    <div class="card-content">***</div>
  </div>
</div>

At last

The overall code disassembly is over. Do you think it is very simple after reading it? If you have other better solutions, please leave a message to exchange. After reading it, you find it useful, remember to like and save it, maybe you will use it someday~

Example link address: https://linear.app/features

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)