<section id="testimonial-area">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="section-heading text-center">
<h5>Testimonial Design </h5>
<h2>A Word From Our Customers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
</div>
<div class="testi-wrap">
<div class="client-single active position-1" data-position="position-1">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-2" data-position="position-2">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-3" data-position="position-3">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-4" data-position="position-4">
<div class="client-img">
<img src="https://media.licdn.com/dms/image/C4E03AQFbvYtvSeyw-g/profile-displayphoto-shrink_100_100/0?e=1574294400&v=beta&t=49_VH9HRvqymP-VLETlFhFt4idmunZPhIQfALwaTrmA" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-5" data-position="position-5">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-6" data-position="position-6">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
<div class="client-single inactive position-7" data-position="position-7">
<div class="client-img">
<img src="https://cdn.dribbble.com/users/2132253/avatars/small/1799e2c9badff08058551384763e284c.jpg?1568268299" width="40px" alt="">
</div>
<div class="client-comment">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h3>
<span><i class="fa fa-quote-left"></i></span>
</div>
<div class="client-info">
<h3>Design By</h3>
<p><a href="https://manjaygupta.com">Manjay Gupta</a></p>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
#testimonial-area {
.section-heading h2 {
font-size: 48px;
line-height: 58px;
}
}
.testi-wrap {
position: relative;
height: 725px;
margin-top: -80px;
}
.client-single {
margin-top: 20px;
text-align: center;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.client-info,
.client-comment {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.client-single {
&.inactive {
.client-comment,
.client-info {
display: none;
}
.client-comment,
.client-info {
opacity: 0;
visibility: hidden;
}
}
&.position-1 {
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
&.position-2 {
left: -40px;
top: 105px;
}
&.position-3 {
left: -60px;
top: 240px;
-webkit-transform: scale(0.4) !important;
transform: scale(0.4) !important;
}
&.position-4 {
left: 55px;
top: 380px;
}
&.position-5 {
top: 30px;
right: 55px;
}
&.position-6 {
top: 225px;
right: -40px;
}
&.position-7 {
top: 400px;
right: 45px;
-webkit-transform: scale(0.4) !important;
transform: scale(0.4) !important;
}
&.active {
top: 10%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 10;
width: 70%;
.client-comment,
.client-info {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
}
&:not(.active) {
-webkit-transform: scale(0.55);
transform: scale(0.55);
z-index: 99;
}
&.active .client-img {
width: 160px;
height: 160px;
margin: 0 auto 24px;
position: relative;
&:before {
border-radius: 100%;
content: '';
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(157, 91, 254)), to(rgb(56, 144, 254)));
background-image: linear-gradient(180deg, rgb(157, 91, 254) 0%, rgb(56, 144, 254) 100%);
padding: 5px;
width: 160px;
height: 160px;
top: -4px;
left: 0px;
position: absolute;
z-index: -1;
}
}
.client-img img {
width: 150px;
border-radius: 50%;
border: 8px solid #d1e9ff;
cursor: pointer;
}
&.active .client-img img {
max-width: 160px;
margin: 0 auto 24px;
border: 0;
}
}
.client-comment {
padding: 0 30px;
h3 {
font-size: 22px;
line-height: 32px;
color: #505b6d;
}
span i {
font-size: 60px;
color: #0084ff;
margin: 40px 0 24px;
display: inline-block;
}
}
.client-info {
h3 {
color: #000;
font-weight: 600;
margin-bottom: 4px;
}
p {
color: #0084ff;
text-transform: uppercase;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#testimonial-area .section-heading h2 {
font-size: 30px;
}
.client-comment h3 {
font-size: 18px;
line-height: 28px;
}
.client-single.active {
width: 60%;
}
.client-single:not(.active) {
-webkit-transform: scale(0.55);
transform: scale(0.35);
}
.client-single.position-3,
.client-single.position-7 {
-webkit-transform: scale(.30) !important;
transform: scale(.30) !important;
}
.client-single.active .client-img img {
max-width: 100px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 108px;
height: 108px;
top: -4px;
left: 6px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 580px;
}
#testimonial-area {
padding: 100px 0 0;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#testimonial-area .section-heading h2 {
font-size: 30px;
}
.client-comment h3 {
font-size: 14px;
line-height: 26px;
}
.client-single.active {
width: 60%;
}
.client-comment span i {
font-size: 40px;
}
.client-single:not(.active) {
-webkit-transform: scale(0.55);
transform: scale(0.35);
}
.client-single.position-5,
.client-single.position-7 {
right: 0;
}
.client-single.position-4 {
left: 0;
}
.client-single.position-3,
.client-single.position-7 {
-webkit-transform: scale(.30) !important;
transform: scale(.30) !important;
}
.client-single.active .client-img img {
max-width: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 630px;
}
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
#testimonial-area .section-heading h2 {
font-size: 30px;
line-height: 40px
}
.client-comment h3 {
font-size: 14px;
line-height: 26px;
}
.client-single.active {
width: 80%;
}
.client-comment span i {
font-size: 40px;
}
.client-single:not(.active) {
-webkit-transform: scale(0.25);
transform: scale(0.25);
}
.client-single.position-5,
.client-single.position-7,
.client-single.position-6 {
right: -70px;
}
.client-single.position-4 {
left: -60px;
}
.client-single.position-3 {
left: -75px;
}
.client-single.position-3,
.client-single.position-7 {
-webkit-transform: scale(.25) !important;
transform: scale(.25) !important;
}
.client-single.active .client-img img {
max-width: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 600px;
}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
#testimonial-area .section-heading h2 {
font-size: 30px;
}
.client-comment h3 {
font-size: 14px;
line-height: 26px;
}
.client-single.active {
width: 80%;
}
.client-comment span i {
font-size: 40px;
}
.client-single:not(.active) {
-webkit-transform: scale(0.25);
transform: scale(0.25);
}
.client-single.position-5,
.client-single.position-7,
.client-single.position-6 {
right: -70px;
}
.client-single.position-4 {
left: -60px;
}
.client-single.position-3 {
left: -75px;
}
.client-single.position-3,
.client-single.position-7 {
-webkit-transform: scale(.25) !important;
transform: scale(.25) !important;
}
.client-single.active .client-img img {
max-width: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 550px;
}
}
View Compiled
$(document).ready(function () {
$('.client-single').on('click', function (event) {
event.preventDefault();
var active = $(this).hasClass('active');
var parent = $(this).parents('.testi-wrap');
if (!active) {
var activeBlock = parent.find('.client-single.active');
var currentPos = $(this).attr('data-position');
var newPos = activeBlock.attr('data-position');
activeBlock.removeClass('active').removeClass(newPos).addClass('inactive').addClass(currentPos);
activeBlock.attr('data-position', currentPos);
$(this).addClass('active').removeClass('inactive').removeClass(currentPos).addClass(newPos);
$(this).attr('data-position', newPos);
}
});
}(jQuery));
