Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css


Welcome🎉 to Code With Random blog. We learn how to create a Steam Inspired Game Card Hover Effect in this blog. We use HTML & CSS  for Steam Inspired Game Card Hover Effect. Hope you enjoy our blog so let’s start with a basic HTML structure for the steam Inspired Game Card Hover Effect. 

HTML code

 <div class="l-container">  
<div class="b-game-card">
<div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_1.jpg);"></div>
</div>
<div class="b-game-card">
<div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_2.jpg);"></div>
</div>
<div class="b-game-card">
<div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_3.jpg);"></div>
</div>
<div class="b-game-card">
<div class="b-game-card__cover" style="background-image: url(https://andrewhawkes.github.io/codepen-assets/steam-game-cards/game_4.jpg);"></div>
</div>
</div>

There is all HTML code for the Steam Inspired Game Card Hover Effect. Now, you can see output without CSS, then we write CSS for the Steam Inspired Game Card Hover Effect.

Output

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css
blank screen with a blank html tag

CSS code

 * {  
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #353540;
}
.l-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
width: 100%;
max-width: 1200px;
padding: 30px;
}
@media screen and (max-width: 760px) {
.l-container {
grid-template-columns: repeat(2, 1fr);
}
}
.b-game-card {
position: relative;
z-index: 1;
width: 100%;
padding-bottom: 150%;
perspective: 1000px;
}
.b-game-card__cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
background-size: cover;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
transform-origin: top center;
will-change: transform;
transform: skewX(0.001deg);
transition: transform 0.35s ease-in-out;
}
.b-game-card__cover::after {
display: block;
content: '';
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 120%;
background: linear-gradient(226deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.2) 42%, rgba(255, 255, 255, 0) 60%);
transform: translateY(-20%);
will-change: transform;
transition: transform 0.65s cubic-bezier(0.18, 0.9, 0.58, 1);
}
.b-game-card:hover .b-game-card__cover {
transform: rotateX(7deg) translateY(-6px);
}
.b-game-card:hover .b-game-card__cover::after {
transform: translateY(0%);
}
.b-game-card::before {
display: block;
content: '';
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4);
will-change: opacity;
transform-origin: top center;
transform: skewX(0.001deg);
transition: transform 0.35s ease-in-out, opacity 0.5s ease-in-out;
}
.b-game-card:hover::before {
opacity: 0.6;
transform: rotateX(7deg) translateY(-6px) scale(1.05);
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css

Steam Inspired Game Card Hover Effect | Card Hover Effect Html Css

We have completed our CSS section,  Here is our updated output with CSSHope you like the Steam Inspired Game Card Hover Effect, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Steam Inspired Game Card Hover Effect using simple HTML & CSS. 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 – Andrew Hawkes

Check out more…..





Leave a Reply