Testimonial with quote and profile image

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

Demo

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>