HTML CSS Testimonial Card with Hover Effect

Here’s a testimonial card with a hover effect made with HTML and CSS for a clean, modern card layout that’s perfect for any SaaS or portfolio landing page.

Final output:

“Outstanding platform with exceptional support. The ROI was evident from day one. Highly recommend to any serious business.”

David Park

Product Manager
Innovation Labs

1. Let’s start by adding a div with a classname .testimonial-card. Inside it, add a .testimonial-card-header div with the star ratings wrapper and the quotes icon.

<div class="testimonial-card">
    <div class="testimonial-card-header">
        <div class="testimonial-card-ratings-wrapper">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
        </div>
        <div class="testimonial-card-quotes-icon">
            <img src="quotes.png" alt="">
        </div>
    </div>
</div>

Reset margins, set the font family, and style the card with a border, border-radius, padding, and box-shadow.

* {
    margin: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
}
.testimonial-card {
    max-width: 20rem;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

Output:

2. Style the header. Set its position to relative so the quotes icon can be positioned absolutely inside it. Use flexbox on the ratings wrapper to lay the stars out in a row.

.testimonial-card .testimonial-card-header {
    position: relative;
}
.testimonial-card .testimonial-card-ratings-wrapper {
    color: #2b7fff;
    display: flex;
    gap: .25rem;
}

For the quotes icon, use position: absolute with right and top to push it to the top right corner of the header.

.testimonial-card .testimonial-card-quotes-icon {
    width: 3rem;
    position: absolute;
    right: -1rem;
    top: -1rem;
}
.testimonial-card-quotes-icon img {
    width: 100%;
}

Output:

3. Add the testimonial text paragraph after the header.

<p class="testimonial-card-text">"Outstanding platform with exceptional support. 
The ROI was evident from day one. Highly recommend to any serious business."</p>

Add some top and bottom margin to space it away from the header and footer. Set font-style: italic and a muted color.

.testimonial-card .testimonial-card-text {
    margin: 1.5rem 0;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.625;
    color: #314158;
}

Output:

“Outstanding platform with exceptional support. The ROI was evident from day one. Highly recommend to any serious business.”

4. Add the footer div with the client image and their details inside it.

<div class="testimonial-card-footer">
    <img src="client.jpg" alt="">
    <div>
        <h5 class="client-name">David Park</h5>
        <span class="client-designation">Product Manager</span>
        <br>
        <span class="client-org">Innovation Labs</span>
    </div>
</div>

Use display: grid with a 1fr 3fr column split to size the image and text side by side. Add a top border and some padding-top to visually separate it from the testimonial text. Make the image circular with border-radius: 50%.

.testimonial-card .testimonial-card-footer {
    border-top: 1px solid #f9f3f4;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: center;
    padding-top: 1.5rem;
}
.testimonial-card .testimonial-card-footer img {
    max-width: 100%;
    border-radius: 50%;
}

Style the name, designation, and org with different font sizes and muted colors to create a clear visual hierarchy.

.testimonial-card .client-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.testimonial-card .client-designation {
    font-size: .875rem;
    line-height: 1.4;
    color: #62748e;
}
.testimonial-card .client-org {
    font-size: .75rem;
    line-height: 1.3;
    color: #90a1b9;
}

Output:

“Outstanding platform with exceptional support. The ROI was evident from day one. Highly recommend to any serious business.”

David Park

Product Manager
Innovation Labs

5. Lastly, add a transition on the border-color of the card so we can animate it.

.testimonial-card {
    transition: border-color .2s ease-in-out;
}

Change the border color on card hover.

.testimonial-card:hover {
    border-color: #2b7fff;
}

Output:

“Outstanding platform with exceptional support. The ROI was evident from day one. Highly recommend to any serious business.”

David Park

Product Manager
Innovation Labs

Final Output Code for HTML CSS Testimonial Card with hover effect:

HTML

<div class="testimonial-card">
    <div class="testimonial-card-header">
        <div class="testimonial-card-ratings-wrapper">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
            <img src="star.png" alt="">
        </div>
        <div class="testimonial-card-quotes-icon">
            <img src="quotes.png" alt="">
        </div>
    </div>
    <p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident from day
        one. Highly recommend to any
        serious business."</p>
    <div class="testimonial-card-footer">
        <img src="client.jpg" alt="">
        <div>
            <h5 class="client-name">David Park</h5>
            <span class="client-designation">Product Manager</span>
            <br>
            <span class="client-org">Innovation Labs</span>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.testimonial-card {
    max-width: 16rem;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: border-color .2s ease-in-out;
}

.testimonial-card .testimonial-card:hover {
    border-color: #2b7fff;
}

.testimonial-card .testimonial-card-header {
    position: relative;
}

.testimonial-card .testimonial-card-ratings-wrapper {
    color: #2b7fff;
    display: flex;
    gap: .25rem;
}

.testimonial-card .testimonial-card-quotes-icon {
    width: 3rem;
    position: absolute;
    right: -1rem;
    top: -1rem;
}

.testimonial-card-quotes-icon img {
    width: 100%;
}

.testimonial-card .testimonial-card-text {
    margin: 1.5rem 0;
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.625;
    color: #314158;
}

.testimonial-card .testimonial-card-footer {
    border-top: 1px solid #f9f3f4;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
    align-items: center;
    padding-top: 1.5rem;
}

.testimonial-card .testimonial-card-footer img {
    max-width: 100%;
    border-radius: 50%;
}

.testimonial-card .client-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.testimonial-card .client-designation {
    font-size: .875rem;
    line-height: 1.4;
    color: #62748e;
}

.testimonial-card .client-org {
    font-size: .75rem;
    line-height: 1.3;
    color: #90a1b9;
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.