Card style

1,300 thefunnyjack

Open In Editor Publish Your Code

Card style

Recommended

30 July 2025

Visa Card Checkout Page HTML Template

28 August 2024

Parallax Depth Cards

14 June 2024

3D Flips Card Effect

HTML

CSS

.card {
    border: 1px solid #2c2b3c;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1f1d2e;
    transition: border 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.card:hover {
    border: 1px solid #a855f7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

.card:hover .title {
    color: #a855f7;
}

.imageWrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #2a283d;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    padding: 16px;
}

.title {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f1f1;
    margin-bottom: 8px;
    line-height: 1.4;
}

.meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #b0adc0;
    align-items: center;
}

.views {
    display: flex;
    align-items: center;
    gap: 4px;
}

.author {
    font-style: italic;
    color: #8a87a0;
}

JS