Testimonial with quote and profile image

For example, Testimonial with quote and profile image...

Demo

Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Lorem Ipsum
Image
Image
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
- Lorem Ipsum
Image

HTML

<figure class="testimonial"> <img src="img/tutorials/switching-img-16.jpg" alt="Image" class="background" />
        <figcaption>
                <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </blockquote>
                <h5>- Lorem Ipsum</h5>
        </figcaption>
        <img src="img/tutorials/switching-img-17.jpg" alt="Image" class="profile" /> 
</figure>
<figure class="testimonial hover"><img src="img/tutorials/switching-img-18.jpg" alt="Image" class="background" />
        <figcaption>
                <blockquote>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium </blockquote>
                <h5>- Lorem Ipsum</h5>
        </figcaption>
        <img src="img/tutorials/switching-img-19.jpg" alt="Image" class="profile" /> 
</figure>

CSS

<style>
        .testimonial { 
                font-size: 16px; 
                color: #000000; 
                background-color: #000000; 
                text-align: left; 
                max-height: 220px;  
                width: 31.333%; 
                margin: 10px 1%; 
                float: left; 
                overflow: hidden; 
                position: relative;      
                -webkit-box-shadow: 0 0 7px 1px gray;
                -moz-box-shadow: 0 0 7px 1px gray;
                box-shadow: 0 0 7px 1px gray; 
        }
        .testimonial * {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
        }
        .testimonial .background { 
                max-width: 100%; 
                backface-visibility: hidden; 
                opacity: 0.5; 
        }
        .testimonial figcaption { 
                background-color: #ffffff; 
                width: 40%; 
                padding: 30px 10px 30px 0; 
                position: absolute; 
                top: 0; 
                bottom: 0; 
                left: 0; 
                z-index: 1; 
                opacity: 1; 
         }
        .testimonial figcaption:before { 
                content: ''; 
                width: 0; 
                height: 0; 
                position: absolute; 
                top: 50%; 
                left: 100%; 
                border-style: solid; 
                border-width: 120px 0 120px 120px; 
                border-color: transparent transparent transparent #ffffff;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        }
        .testimonial:after { 
                content: ''; 
                width: 0; 
                height: 0; 
                position: absolute;  
                bottom: 50%; 
                left: 40%; 
                border-style: solid; 
                border-width: 120px 120px 0 120px; 
                border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent; 
         }
        .testimonial h5,
        .testimonial blockquote { 
                line-height: 1.6em;
                margin: 0;
                -webkit-transform: translateX(30px);
                transform: translateX(30px);
        }
        .testimonial h5 { 
                color: #1a1a1a; 
                font-weight: 900; 
                line-height: 1.1em; 
                margin: 10px 0; 
         }
        .testimonial blockquote { 
                font-size: 0.9em; 
                font-style: italic; 
         }
        .testimonial .profile { 
                width: 100px; 
                border-radius: 50%; 
                position: absolute; 
                top: 50%; 
                right: 25%; 
                z-index: 1;
                -webkit-transform: translate(50%, -50%);
                transform: translate(50%, -50%);
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }
</style>

Copyright 2023 by WebiBeris.com. All Rights Reserved.