| .glitch { |
| position: relative; |
| width: var(--glitch-width); |
| max-width: 400px; |
| height: var(--glitch-height); |
| max-height: calc(400px * 1.25); |
| overflow: hidden; |
| margin: 0 auto; |
| } |
| .glitch:hover { |
| cursor: pointer; |
| } |
| .glitch__img { |
| position: absolute; |
| top: calc(-1 * var(--gap-vertical)); |
| left: calc(-1 * var(--gap-horizontal)); |
| width: calc(100% + var(--gap-horizontal) * 2); |
| height: calc(100% + var(--gap-vertical) * 2); |
| background: url(..img1.jpg) no-repeat 50% 0; |
| background-color: var(--blend-color-1); |
| background-size: cover; |
| background-blend-mode: var(--blend-mode-1); |
| } |
Комментарии