Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect







Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect

Welcome🎉 to Code With Random blog. In this blog, we learn how we create Css Card Shadow Hover Effects. We use HTML, Css, and javascript for this Css Card Shadow Hover Effects. I hope you enjoy our blog so let’s start with a basic HTML structure for the Css Card Shadow Hover Effects.

HTML Code

  <div class="features">  
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
<div class="feature">
<a href="#" class="feature-content">
<strong>Some feature</strong>
<span>Description of the awesome feature</span>
</a>
</div>
</div>

There is all the HTML code for the Css Card Shadow Hover Effects. Now, you can see an output with Css Card Shadow Hover Effects then we write javascript for Css Card Shadow Hover Effects.

output

Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect

CSS code

 html, body {  
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #060606;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
.features {
width: 75vw;
height: 50vh;
display: grid;
grid-column-gap: 0.3rem;
grid-row-gap: 0.3rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.feature {
--x-px: calc(var(--x) * 1px);
--y-px: calc(var(--y) * 1px);
--border: 2px;
background: rgba(255, 255, 255, 0.125);
border-radius: 0.5rem;
overflow: hidden;
}
.feature:before, .feature:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
inset: 0px;
border-radius: inherit;
background: radial-gradient(800px circle at var(--x-px) var(--y-px), rgba(255, 255, 255, 0.3), transparent 40%);
}
.feature:before {
z-index: 1;
}
.feature:after {
opacity: 0;
z-index: 2;
transition: opacity 0.4s ease;
}
.feature:hover:after {
opacity: 1;
}
.feature-content {
background: #131315;
border-radius: inherit;
color: white;
text-decoration: none;
z-index: 1;
position: absolute;
inset: var(--border);
display: grid;
grid-template-rows: 1fr 1fr;
grid-row-gap: 0.5rem;
padding: 0 1rem 0 2rem;
}
.feature-content > strong {
align-self: self-end;
font-size: 125%;
}
.feature-content > span {
opacity: 0.7;
}

Css Updated output


Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect

Javascript code

 console.clear();  
const featuresEl = document.querySelector(".features");
const featureEls = document.querySelectorAll(".feature");
featuresEl.addEventListener("pointermove", (ev) => {
featureEls.forEach((featureEl) => {
// Not optimized yet, I know
const rect = featureEl.getBoundingClientRect();
featureEl.style.setProperty("--x", ev.clientX - rect.left);
featureEl.style.setProperty("--y", ev.clientY - rect.top);
});
});

Final output

Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Css Card Shadow Hover Effects. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Css Card Shadow Hover Effects using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – David Khourshid

Share on:

0 thoughts on “Css Card Shadow Hover Effects | Linear-style Cursor Glow Effect”

Leave a Comment