Retro Effect

HTML
<figure> <img src="https://goo.gl/kicfW5" alt=""> </figure>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } body { background: #222; } figure { box-shadow: inset 0 0 100px rgba(0, 0, 20, .7), 0 5px 15px rgba(0, 0, 0, .5); background: -webkit-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%); width: 500px; height: 332px; } figure img { filter: sepia(0.2) brightness(1.1) contrast(1.3); transition: -webkit-filter 0.3s ease-in-out; position: relative; z-index: -1; width: 100%; height: auto; } figure:hover { background: none; } figure:hover img { -webkit-filter: sepia(0) brightness(1) contrast(1); } figure { margin: 20px auto; }
JAVASCRIPT
Expand for more options Login