• CTRL ALT News
  • Posts
  • Beginners Neon Card Hover Effect [HTML/CSS/JAVASCRIPT]

Beginners Neon Card Hover Effect [HTML/CSS/JAVASCRIPT]

In this short guide, I will show you how to create a card with a cool neon hover effect.

Author

CTRL ALT News
November 30th, 2023

Beginners Neon Card Hover Effect [HTML/CSS/JAVASCRIPT]

Source code here.

In this short guide, I will show you how to create a card with a cool neon hover effect.

Youtube version:

Setting things up

The first thing we need to do is create the needed files:

  1. Create a folder of any name.

  2. Inside the folder, create a file called “index.html”

  3. Inside the folder, create a file called “styles.css”

The HTML

The first thing we need to code is the HTML of our card. The following code should be put inside your “index.html” file: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Document</title>
</head>

<body>
  <div class="card">
    <div class="cardText">
      <h1>Cool Header</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda aperiam quasi doloremque fugit nam, earum,
        id ipsum similique iusto quisquam sint, temporibus non tempore sequi!</p>
    </div>
  </div>
</body>

</html>


This is basic HTML code that displays a simple web page with some styled content. Here is an explanation of what each part does:

<!DOCTYPE html> - This declares that this document is an HTML5 document. This helps the browser render it properly.<html lang="en"> - This opens the root html tag. The "lang" attribute specifies the language of the page content.<head> - This opens the head tag which contains meta-data and links to external resources.

<meta charset="UTF-8"> - This sets the character encoding for the page to UTF-8 which includes most characters from all languages.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> - This configures the viewport meta tag which controls how the page is rendered on mobile devices.

<link rel="stylesheet" href="styles.css"> - This links an external CSS stylesheet file containing styling rules. <title>Document</title> - This defines the title of the page shown in the browser tab and search results. </head> - Closes the head tag. <body> - Opens the body tag which contains the visible page content. <div class="card"> - Defines a div with class "card" which can be styled with CSS.<div class="cardText"> - A nested div for styling the text content specifically.<h1>Cool Header</h1> - A header tag containing the text "Cool Header".<hr> - A horizontal rule element to display a divider line.<p>Lorem ipsum...</p> - A paragraph tag containing filler text.</div> - Closes the cardText div.</div> - Closes the card div.</body> - Closes the body tag.</html> - Closes the root html tag.

The key things this does is structure the page content semantically with HTML, apply styling hooks with classes, and link to an external CSS file.

The styling

The next thing we will need is our styling. The following code should be put inside your “styles.css” file: 

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.card {
  height: fit;
  padding: 18px;
  width: 300px;
  background-color: #050505;
  border: 1px solid #101010;
  border-radius: 25px;
  transition: transform 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: scale(1.025);
}
.cardText {
  position: relative;
  z-index: 10;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
}
.cardText hr {
  width: 100%;
  border: 1px solid #101010;
}
.cardText p {
  line-height: 1.5;
  font-size: 14px;
  text-align: center;
}
.cardText h1 {
  font-weight: 900;
}
.card::before {
  content: "";
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  background: radial-gradient(#00ff, transparent,transparent);
  height: 500px;
  width: 500px;
  opacity: 0;
  transition: 0.5s, top 0s, left 0s;
}
.card:hover::before {
  opacity: 1;
}
.card::after {
  content: "";
  position: absolute;
  inset: 1px;
  background-color: rgba(5, 5, 5, 0.95);
  border-radius: 25px;
}

You might be wondering, what does this code do? Here is a breakdown:

Body Element

  • Remove default margin and padding

  • Set full viewport height and width

  • Enable flexbox with centered vertical and horizontal alignment

  • Black background color

  • White text color

  • Default system font stack

Card Container

  • Dynamic height

  • 18px padding on all sides

  • 300px width

  • Dark gray background

  • 1px black border

  • 25px border-radius

  • Enable hover transition

  • Position relative for pseudo-elements

  • Hide overflow

Card Hover State

  • Grow 2.5% on hover

Card Text Container

  • Position relative

  • Higher stack order

  • Enable flexbox

  • Align flex items horizontally and vertically centered

  • Stack flex items vertically

Card Text Horizontal Rule

  • Full width

  • 1px gray border

Card Text Paragraph

  • 1.5x line height

  • 14px size

  • Center aligned

Card Text Heading

  • Extra bold

Card Before Pseudo Element

  • Empty content, otherwise the CSS will not show

  • Absolute position

  • Center aligned

  • Radial gradient overlay

  • 500x500px size

  • Transparent initial state

  • Enable opacity transition

Card Hover Before State

  • Fade in the blue blur

Card After Pseudo Element

  • Empty content, otherwise the CSS will not show

  • Absolute position

  • 1px inset shadow on all sides

  • Semi-transparent gray background

  • 25px border-radius

The Javascript

For this to work correctly we will also need a small bit of Javascript. The following script should be put right after your card div: 

<script>
    const card = document.querySelector(".card")
    card.addEventListener("mousemove", (e) => {
      const x = e.pageX - card.offsetLeft
      const y = e.pageY - card.offsetTop

      card.style.setProperty("--left", x + "px")
      card.style.setProperty("--top", y + "px")
    })
</script>

The above code is a Javascript code snippet that adds an interactive “mousemove” effect to an element on the page. Here is what it does step-by-step:

  1. Select the card element using querySelector and the .card class. This stores a reference to that DOM element in the card variable.

  2. Add a “mousemove” event listener to the card element. This will call the callback function anytime the mouse moves over the card.

  3. Inside the callback:

    1. e.pageX and e.pageY give the mouse position on the whole page

    2. card.offsetLeft and card.offsetTop gives the card position.

  4. Subtract the card offsets from the page positions to get the mouse position relative to the top-left of the card. This is stored in x and y.

  5. Use setProperty on the card's style to set CSS custom properties "--left" and "--top" to the new x and y values.

  6. Adding "px" units makes it set a position, causing the card to follow the mouse around its area.

Rounding up

You have now created the card. But how do I see it? Simply open the “index.html” file, by double-clicking it. The card page should now be in your browser. You can also use VS Code extensions such as “Live Server”, to view it.