/* * Lo-fi * */ .lofi:before, .lofi:after { content: ''; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; } .lofi { position: relative; } .lofi img { width: 100%; z-index: 1; } .lofi:before { z-index: 2; } .lofi:after { z-index: 3; } .lofi { -webkit-filter: saturate(1.1) contrast(1.5); filter: saturate(1.1) contrast(1.5); } .lofi:after { background: -webkit-radial-gradient(circle, transparent 70%, #222 150%); background: radial-gradient(circle, transparent 70%, #222 150%); mix-blend-mode: multiply; }