CSS Profile Cards

Last Updated:

February 8, 2023

CSS profile cards are an effective way to showcase your news content on your website. They can be customized to highlight new posts, featured content, and more. You can also add features like author/post information, comments, ratings, and related posts.

Interactive profile card HTML CSS

<a href="#" class="profile-card-hover-image-zoom">
    <div class="card-info">
      <div class="caption">
        <h2>Ricky Park</h2>
      </div>
      <div class="description">
        <p>Lorem ipsum dolor sit, amet consectetur adipcing el adipisc fuga!</p>
      </div>
    </div>
</a>

.profile-card-hover-image-zoom {
    background: url("https://cdn.pixabay.com/photo/2019/08/06/00/46/black-and-white-4387130_960_720.jpg");
    background-size: 379px; 
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 379px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: block;
    transition: 0.8s
}
.profile-card-hover-image-zoom::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 45%);
    opacity: 0;
    transition: .6s ease;
}
.profile-card-hover-image-zoom .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 1.4rem;
    transform: translateY(100%);
    transition: 0.2s ease-in-out;
}
.profile-card-hover-image-zoom .card-info .caption {
    position: relative;
    display: flex;
    align-items: center;
    transform: translateY(-150%);
    transition: 0.2s ease-in-out;
}
.profile-card-hover-image-zoom .card-info .desctiption {
    margin: 0;
    padding: 0 1.4rem;
    color: #cbcbcb;
    font-size: 0.925rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-bottom: 1rem;
}
.profile-card-hover-image-zoom .card-info .caption h2 {
    color: #fff;
    padding: 10px 0px;
    letter-spacing: 2px;
    
}
.profile-card-hover-image-zoom .card-info .description p{
    color: rgb(219, 219, 219);
    margin: 0;
}
.profile-card-hover-image-zoom:hover{
    cursor: pointer;
    background-size: 570px;
    background-position: left center;
}
.profile-card-hover-image-zoom:hover::before {
    opacity: 1;
}
.profile-card-hover-image-zoom:hover .card-info {
    transform: translateY(0);
    }
.profile-card-hover-image-zoom:hover .caption {
    transform: translateY(0);
}

.profile-card-hover-image-zoom {
    background: url("https://cdn.pixabay.com/photo/2019/08/06/00/46/black-and-white-4387130_960_720.jpg");
    background-size: 379px;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 379px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: block;
    transition: 0.8s;
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(0 0 0 / 45%);
        opacity: 0;
        transition: 0.6s ease;
    }
    .card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        padding: 1.4rem;
        transform: translateY(100%);
        transition: 0.2s ease-in-out;
        .caption {
            position: relative;
            display: flex;
            align-items: center;
            transform: translateY(-150%);
            transition: 0.2s ease-in-out;
            h2 {
                color: #fff;
                padding: 10px 0px;
                letter-spacing: 2px;
            }
        }
        .desctiption {
            margin: 0;
            padding: 0 1.4rem;
            color: #cbcbcb;
            font-size: 0.925rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        .description {
            p {
                color: rgb(219, 219, 219);
                margin: 0;
            }
        }
    }
    &:hover {
        cursor: pointer;
        background-size: 570px;
        background-position: left center;
        &::before {
            opacity: 1;
        }
        .card-info {
            transform: translateY(0);
        }
        .caption {
            transform: translateY(0);
        }
    }
}