.hero-image{--_g:10%/45% 45% no-repeat conic-gradient(#000 0 0);mask:left var(--_i,0) top var(--_g),bottom var(--_i,0) left var(--_g),top var(--_i,0) right var(--_g),right var(--_i,0) bottom var(--_g);filter:grayscale();transition:.3s linear;cursor:pointer}.hero-image:hover{--_i:10%;filter:grayscale(0)}