html,
body {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
}

/* Main */
main {
  --main-margin: 48px;
  height: calc(100% - calc(var(--main-margin) * 2));
  width: calc(100% - calc(var(--main-margin) * 2));
  margin: var(--main-margin);
  display: flex;
  align-items: center;
  justify-content: center;
}

img.main {
  height: auto;
  width: auto;
  transition-timing-function: ease-in-out;
  transition: 5s;
  clip-path: polygon(
    100% 50%,
    100% 100%,
    0 100%,
    0 0,
    100% 0,
    100% 50%,
    40% 47%,
    39.95905988250499% 46.59740295982268%,
    39.83791562324046% 46.211288289773364%,
    39.64152688241455% 45.85746356981041%,
    39.37793383815137% 45.55041442554176%,
    39.057928020653925% 45.3027114850105%,
    38.69461050568964% 45.12449573570584%,
    38.30285555500915% 45.02306335134378%,
    37.89870166232257% 45.00256698565789%,
    37.49869493548256% 45.06384576226759%,
    37.11921169688473% 45.204390920858515%,
    36.77578803490467% 45.4184485261246%,
    36.48248375461442% 45.69725503455555%,
    36.25130676771084% 46.029396074937836%,
    36.091721487199905% 46.401273754053285%,
    36.01026135321621% 46.79766335602513%,
    36.01026135321621% 47.20233664397487%,
    36.091721487199905% 47.598726245946715%,
    36.25130676771084% 47.970603925062164%,
    36.48248375461442% 48.30274496544445%,
    36.77578803490467% 48.5815514738754%,
    37.11921169688473% 48.795609079141485%,
    37.49869493548256% 48.93615423773241%,
    37.89870166232257% 48.99743301434211%,
    38.30285555500915% 48.97693664865622%,
    38.69461050568964% 48.875504264294165%,
    39.057928020653925% 48.6972885149895%,
    39.37793383815137% 48.44958557445824%,
    39.64152688241455% 48.14253643018959%,
    39.83791562324046% 47.788711710226636%,
    39.95905988250499% 47.40259704017732%,
    40% 47%,
    100% 50%,
    65% 47%,
    64.95905988250499% 46.59740295982268%,
    64.83791562324046% 46.211288289773364%,
    64.64152688241455% 45.85746356981041%,
    64.37793383815138% 45.55041442554176%,
    64.05792802065392% 45.3027114850105%,
    63.69461050568964% 45.12449573570584%,
    63.30285555500915% 45.02306335134378%,
    62.89870166232257% 45.00256698565789%,
    62.49869493548256% 45.06384576226759%,
    62.11921169688473% 45.204390920858515%,
    61.77578803490467% 45.4184485261246%,
    61.48248375461442% 45.69725503455555%,
    61.25130676771084% 46.029396074937836%,
    61.091721487199905% 46.401273754053285%,
    61.01026135321621% 46.79766335602513%,
    61.01026135321621% 47.20233664397487%,
    61.091721487199905% 47.598726245946715%,
    61.25130676771084% 47.970603925062164%,
    61.48248375461442% 48.30274496544445%,
    61.77578803490467% 48.5815514738754%,
    62.11921169688473% 48.795609079141485%,
    62.49869493548256% 48.93615423773241%,
    62.89870166232257% 48.99743301434211%,
    63.30285555500915% 48.97693664865622%,
    63.69461050568964% 48.875504264294165%,
    64.05792802065392% 48.6972885149895%,
    64.37793383815138% 48.44958557445824%,
    64.64152688241455% 48.14253643018959%,
    64.83791562324046% 47.788711710226636%,
    64.95905988250499% 47.40259704017732%,
    65% 47%
  );
}

main::before {
  position: absolute;
  top: 45%;
  left: 40%;
  display: block;
  content: '';
  width: 20%;
  height: 10%;
  background-color: red;
}

img.main:not(.show) {
  max-height: 60%;
  max-width: 60%;
  filter: grayscale(100%) blur(5px);
}

img.main.show {
  max-height: 100%;
  max-width: 100%;
}