How to make a css card design with beautifull hover effect using html and css | BY Ascode

How do you make a card hover in CSS,
How do I add a hover effect to my card,
What are CSS cards,
What is CSS hover effects,
bootstrap 4 card hover effect ascode,
product card hover effect ascode,
css responsive card hover effects,
css card hover effects ascode,
bootstrap card hover effects,
card hover effects bootstrap 4,
card hover effects css ascode,
simple card hover effects,ascode, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to Ascode Blog . In this post we are going to learn how to makeing css card design with beautifull hover effect . First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <div class="card">
        <div class="background"></div>
        <div class="icon"><i class="fab fa-servicestack"></i></div>
        <div class="content">
        <h1> Services</h1>
        <p>LWe are utilizing absolutely secure servers and encryption, every one of your information safe </p>
        <a href="#">Read More ></a>
    <div class="card">
        <div class="background"></div>
        <div class="icon"><i class="fas fa-signal"></i></div>
        <div class="content">
        <h1>Constant growth</h1>
        <p>Our content increment gainfulness rate step by step </p>
        <a href="#">Join Now ></a>
    <div class="card">
        <div class="background"></div>
        <div class="icon"><i class="fas fa-id-card-alt"></i></div>
        <div class="content">
        <h1>Support 24/7</h1>
        <p>Our help and customer-support group consistently prepared to support you </p>
        <a href="#">Contact ></a>


        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        box-sizing: border-box;
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #FFF;

    .card {
        background: transparent;
        width: 350px;
        height: 350px;
        margin: 10px;
        box-shadow:  0 0 5px #ccc;
        border-radius: 10px;
        text-align: center;
        columns: #000;
        overflow: hidden;
        margin: 10px;
    .content {
        margin: -60px 20px;
    h1 {
        font-size: 25px;
        font-weight: 600;
        margin: 15px auto ;
        text-transform: uppercase;
    p {
        font-size: 18px;
        font-weight: 400;
        margin: 10px auto ;

    .icon {
       position: relative;
        font-size: 2.5rem;
        color: rgb(255, 60, 0);
        margin: 0 auto;
        z-index: 2;
        top: -25%;
        transition: 0.5s;
    .background {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        /* background: linear-gradient(to bottom,#26d3b6 0,#0e377d 100%); */
        background: linear-gradient(45deg, #26d3b6, #0e377d);
        border-radius: 0 0 50px 50px;
        transform: translateY(-100%);
        z-index:-1 ;
        transition: 0.5s;

    a {
        text-decoration: none;
        font-size: 20px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 20px auto;
        transition: 0.2s;
        color: #000;
        display: inline-block;
    a:hover {
        background: linear-gradient(to bottom,#26d3b6 0,#0e377d 100%);
        color: #fff;
    .card:hover {
        border: 2px solid #f09;

    .card:hover .background {
        transform: translateY(0);
        color: #fff;
    .card:hover .icon {
        color: #fff;

    @media (max-width:600px) {
        body {
            display: block;
        .card {
            width: 90%;
            height: 100%;

Youtube Tutorial


Post a Comment


Join Telegram