open_in_new content_copy 
<!DOCTYPE html>

<html lang="en">

<style>
.card-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    --x: 0;
    --y: 0;
    flex: 1;
    margin: 0 10px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('https://media.discordapp.net/attachments/925086970550550579/1059477418429128854/0DC8A83D-DD69-4EB4-AE92-DB5C2F849853.jpg?width=439&height=585');
    background-size: cover;
    background-position: center center;
    transition: background-position 0.3s;
}

.card:hover {
    background-position: center 10%;
}

.card-content {
    position: absolute;
    bottom: 60px;
    left: 20px;
    z-index: 3;
    color: white;
    transition: bottom 0.3s, left 0.3s, transform 0.3s;
}

.card:hover .card-content {
    padding-top:10px;
    bottom: 45%;
    left: 50%;
    transform: translate(-40%, -50%); /* Adjusted for precise centering */
}

h2, p {
    margin: 0;
}

.social-icons {
    position: absolute;
    bottom: 10px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 3;
    transition: bottom 0.3s, left 0.3s, transform 0.3s;
}

.card:hover .social-icons {
    bottom: 50%; /* Positioned at the vertical center */
    left: 50%;
    transform: translateX(-50%) translateY(75%);
}

i {
    color: white;
    font-size: 24px;
}

/* Dark overlay */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 2;
    transition: background 0.3s;
}

.card:hover::before {
    background: rgba(0, 0, 0, 0.3);
}

.card::after {
    /* ... (existing styles) ... */
    top: var(--y);
    left: var(--x);
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 70%);
    pointer-events: none; /* Ensure the pseudo-element doesn't interfere with other interactions */
    z-index: 4;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

.card:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ... (previous CSS) ... */

.tech-icons {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}

.tech-icon {
    color: white;
    font-size: 24px;
}

/* Facebook Icon Glow */
.card .fab.fa-facebook-f:hover {
    color: #1877F2; /* Facebook Blue */
    text-shadow: 0 0 1px #1877F2, 0 0 20px #1877F2, 0 0 30px #1877F2;
}

/* Instagram Icon Glow */
.card .fab.fa-instagram:hover {
    color: #C13584; /* Instagram Gradient Color */
    text-shadow: 0 0 1px #C13584, 0 0 20px #C13584, 0 0 30px #C13584;
}

/* Twitter Icon Glow */
.card .fab.fa-twitter:hover {
    color: #1DA1F2; /* Twitter Blue */
    text-shadow: 0 0 1px #1DA1F2, 0 0 20px #1DA1F2, 0 0 30px #1DA1F2;
}
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-Column Card Section</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="styles.css"> <!-- Assuming you have an external CSS file named styles.css -->
</head>

<body>
    <div class="card-container">
        <div class="card">
            <div class="card-content">
                <h2>Name</h2>
                <p>Title</p>
            </div>
            <div class="social-icons">
                <i class="fab fa-facebook-f"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-twitter"></i>
            </div>
            <div class="tech-icons">
                <i class="fab fa-html5 tech-icon"></i>
                <i class="fab fa-js tech-icon"></i>
                <i class="fab fa-css3-alt tech-icon"></i>
            </div>
        </div>

        <div class="card">
            <div class="card-content">
                <h2>Name</h2>
                <p>Title</p>
            </div>
            <div class="social-icons">
                <i class="fab fa-facebook-f"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-twitter"></i>
            </div>
            <div class="tech-icons">
                <i class="fab fa-html5 tech-icon"></i>
                <i class="fab fa-js tech-icon"></i>
                <i class="fab fa-css3-alt tech-icon"></i>
            </div>
        </div>

        <div class="card">
            <div class="card-content">
                <h2>Name</h2>
                <p>Title</p>
            </div>
            <div class="social-icons">
                <i class="fab fa-facebook-f"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-twitter"></i>
            </div>
            <div class="tech-icons">
                <i class="fab fa-html5 tech-icon"></i>
                <i class="fab fa-js tech-icon"></i>
                <i class="fab fa-css3-alt tech-icon"></i>
            </div>
        </div>
    </div>
</body>

</html>