Image Masks
![](../assets/images/creative-agency-about.jpg)
<img class="img-mask-1" src="../assets/images/img-src.jpg" alt="">
![](../assets/images/creative-agency-about.jpg)
<img class="img-mask-2" src="../assets/images/img-src.jpg" alt="">
Avatars
Large Avatars
![](../assets/images/circle-team-2.jpg)
![](../assets/images/circle-team-2.jpg)
![](../assets/images/circle-team-2.jpg)
<img class="img-avatar-200" src="../assets/images/img-src.jpg" alt="">
<img class="img-avatar-180" src="../assets/images/img-src.jpg" alt="">
<img class="img-avatar-160" src="../assets/images/img-src.jpg" alt="">
Small Avatars
![](../assets/images/testimonial-1.jpg)
![](../assets/images/testimonial-1.jpg)
![](../assets/images/testimonial-1.jpg)
<img class="img-avatar-80" src="../assets/images/img-src.jpg" alt="">
<img class="img-avatar-70" src="../assets/images/img-src.jpg" alt="">
<img class="img-avatar-60" src="../assets/images/img-src.jpg" alt="">
Avatar Group
<ul class="avatar-group">
<li>
<img src="../assets/images/img-src.jpg" alt="" data-rjs="2">
</li>
<li>
<img src="../assets/images/img-src.jpg" alt="" data-rjs="2">
</li>
<li>
<img src="../assets/images/img-src.jpg" alt="" data-rjs="2">
</li>
</ul>
Image Overlap
![](../assets/images/business-about-1.jpg)
![](../assets/images/business-about-2.jpg)
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<div class="img-overlap">
<div class="img-1">
<img src="../assets/images/img-src.jpg" alt="">
</div>
<div class="img-2">
<img src="../assets/images/img-src.jpg" alt="">
</div>
</div>
</div>
</div><!-- end row -->