Hover photobox

by avgustre

HTML

<div class="page">
  <div class="page__demo">
    <div class="page__container">
      <div class="photobox photobox_type1">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/man3_640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #1</span>
        </div>
      </div>
      <div class="photobox photobox_type2">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/girl3_640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #2</span>
        </div>
      </div>
      <div class="photobox photobox_type3">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/nature640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #3</span>
        </div>
      </div>
      <div class="photobox photobox_type4">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/nature640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #4</span>
        </div>
      </div>
      <div class="photobox photobox_type5">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/man3_640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #5</span>
        </div>
      </div>
      <div class="photobox photobox_type6">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/girl3_640x426.jpg" class="photobox__preview" alt="Preview">
          <span class="photobox__label">Effect #6</span>
        </div>
      </div>
      <div class="photobox photobox_type7">
        <div class="photobox__previewbox">
          <img src="https://stas-melnikov.ru/cliparts/man3_640x426.jpg" class="photobox__preview" alt="Preview">
   ...

CSS

/*
P.S: if you like my content maybe you will become a donator and donate some money? That helps me to create new awesome materials. https://www.paypal.me/melnik909
*/

/*
* The function calc is working wrong in case calculations in the Firefox
*/

.photobox{
  display: inline-block;
}

.photobox__previewbox{
  position: relative;
  overflow: hidden;
}

.photobox__preview{
  display: block;
  max-width: 100%;
}

.photobox__previewbox:before{
  content: "";
}

/* type 1 */

.photobox_type1 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  border-radius: 50%;
  
  position: absolute;
  top: 0;
  left: 0;

  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  transition: transform calc(var(--photoboxAnimationDuration, .2s) / 2) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type1:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transition-delay: 0s;
}

.photobox_type1 .photobox__label{
  width: 50%;
  transform: translate(-200%, -50%);
  transition: transform var(--photoboxAnimationDuration, .2s) ease-out;
  will-change: transform;
  
  position: absolute;
  top: 50%;
  left: 15%;
}

.photobox_type1:hover .photobox__label{
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transform: translate(0, -50%);
}

/* type 2*/

.photobox_type2 .photobox__previewbox:before{
  width: 0;
  height: 0;
  padding: 25%;
  
  border-radius: 50%;
  background-color: var(--photoboxOverlay, rgba(0, 0, 0, .8));
  
  position: absolute;
  top: 0;
  right: 0;

  transition: transform var(--photoboxAnimationDuration, .2s) ease calc(var(--photoboxAnimationDuration, .2s) / 2);
  will-change: transform;
  transform: scale(0);
}

.photobox_type2:hover .photobox__previewbox:before{
  transform: scale(2);
  transition-duration: var(--photoboxAnimationDuration, .2s);
  transition-delay: 0s;
}

.photobox_type2...