<div class="page">
  <div class="page__container">
    <span class="page__caption">Effect #1</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type1 mask_type1-a1 page__tile">
        <img src="https://images.unsplash.com/photo-1550927407-50e2bd128b81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>
  </div>
  <div class="page__container">
    <span class="page__caption">Effect #2</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type2 mask_type2-a1 page__tile">
        <img src="https://images.unsplash.com/photo-1585402627084-e80d83061b76?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>
  </div>
  <div class="page__container">
    <span class="page__caption">Effect #3</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type3 mask_type3-a1 page__tile">
        <img src="https://images.unsplash.com/photo-1551712702-4b7335dd8706?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>
  </div>      
  <div class="page__container">
    <span class="page__caption">Effect #4</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type4 mask_type4-a1 page__tile">
        <img src="https://images.unsplash.com/photo-1549150712-1d243024db80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>
  </div>
  <div class="page__container">
    <span class="page__caption">Effect #5</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type1 mask_type1-a2 page__tile">
        <img src="https://images.unsplash.com/photo-1551625864-3e291c567ab2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>
  </div>  
  <div class="page__container">
    <span class="page__caption">Effect #6</span>
    <div class="page__demo">
      <a href="#0" class="mask mask_type2 mask_type2-a2 page__tile">
        <img src="https://images.unsplash.com/photo-1569466896818-335b1bedfcce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="mask__img" alt="The avatar of Stas Melnikov">
      </a>
    </div>      
  </div>
</div>

/*
=====
CORE STYLES
=====
*/

.mask{
  --uiMaskClipPath: var(--maskClipPath);

  box-sizing: var(--maskBoxSizing, border-box);
  display: var(--maskDisplay, inline-flex);
  padding: var(--maskStrokeThickness, 3px);
  clip-path: var(--uiMaskClipPath);
  background-color: var(--maskStrokeColor, currentColor);
}

.mask__img{
  max-width: 100%;
  display: block;
  clip-path: var(--uiMaskClipPath);
}

.mask, 
.mask__img{
  transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}

/* masks */

.mask_type1{
  --maskClipPath: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}

.mask_type2{
  --maskClipPath: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.mask_type3{
  --maskClipPath: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%);
}

.mask_type4{
  --maskClipPath: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* effect 1*/

.mask_type1-a1{
  --maskAnimationDuration: .4s;
}

.mask_type1:hover, 
.mask_type1:focus{
  --maskClipPath: polygon(0 0, 100% 0, 100% 10%, 100% 100%, 90% 100%, 0% 100%, 0% 90%, 0% 10%);
}

/* effect 2*/

.mask_type2-a1{
  --maskAnimationDuration: .4s;
}

.mask_type2:hover, 
.mask_type2:focus{
  --maskClipPath: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}

/* effect 3*/

.mask_type3-a1{
  --maskAnimationDuration: .5s
}

.mask_type3:hover, 
.mask_type3:focus{
  --maskClipPath: polygon(90% 0, 100% 0, 100% 10%, 100% 90%, 100% 100%, 90% 100%, 10% 100%, 0 100%, 0 90%, 0 10%, 0 0, 10% 0);
}

/* effect 4*/

.mask_type4:hover, 
.mask_type4:focus{
  --maskClipPath: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* effect 5*/

.mask_type1-a2{
  --maskAnimationDuration: .5s;
}

.mask_type1-a2:hover, 
.mask_type1-a2:focus{
  --maskClipPath: polygon(0 0, 90% 0, 100% 0, 100% 90%, 100% 100%, 10% 100%, 0 100%, 0 10%); 
}

/* effect 6*/

.mask_type2-a2{
  --maskAnimationDuration: .9s;
  --maskAnimationTimingFunction: cubic-bezier(1, 0.18, 0, 1.14);
}

/*
=====
SETTINGS
=====
*/

.mask{
  --maskStrokeColor: #ecebef;
  --maskStrokeThickness: 5px;
}

/*
=====
DEMO
=====
*/

body{
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  background-color: #211e25;
}

.page{
  box-sizing: border-box;
  width: 100%;
  padding: 1.5rem;
  margin: auto;  
  text-align: center;

  display: grid; 
  grid-gap: 3rem; 
  grid-template-columns: repeat(auto-fit, 15rem);
  justify-content: center;
}

.page__caption{
  display: inline-block; 
  padding: .5rem 2rem;

  background-color: #ecebef;
  font-size: 1rem; 
  color: #211e25; 
  text-transform: uppercase;
}

.page__demo{ 
  margin-top: 1.5rem;  
}

.page__tile{ 
  width: 9rem; 
  height: 9rem; 
}