Mask

Square Mask

Use square mask adding .mask & .mask-square class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-square">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Diamond Mask

Use diamond mask using .mask & .mask-diamond class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-diamond">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Circle Mask

To set circle mask, you can use .mask & .mask-circle class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-circle">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Hexagon Mask

Set hexagon mask using .mask & .mask-hexagon class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-hexagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Heptagon Mask

Add heptagon mask using .mask & .mask-heptagon class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-heptagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Octagon Mask

Add octagon mask using .mask & .mask-octagon class.

avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-octagon">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Triangle Mask

To set triangle mask, you can use .mask-triangle-1, .mask-triangle-2, .mask-triangle-3 & .mask-triangle-4 class.

avatar
avatar
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-triangle-4">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-triangle-3">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Pentagon Mask

Use pentagon mask adding .mask-pentagon-1, .mask-pentagon-2, .mask-pentagon-3 & .mask-pentagon-4 class.

avatar
avatar
avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-pentagon-3">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-pentagon-4">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Parallelogram Mask

To set parallelogram mask, you can add .mask-parallelogram-1 & .mask-parallelogram-2 class.

avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-parallelogram-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-parallelogram-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Trapezoid Mask

Use trapezoid mask using .mask-trapezoid-1 & .mask-trapezoid-2 class.

avatar
avatar
<div class="flex flex-wrap justify-center gap-2">
   <div class="mask mask-trapezoid-1">
     <img src="../../image.jpg" alt="avatar"/>
   </div>
   <div class="mask mask-trapezoid-2">
     <img src="../../image.jpg" alt="avatar"/>
   </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode