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;
}
