Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS filter property. Additionally, use an inset box-shadow to create a vignette effect as used by photographers. Learn how to remove each effect by using transition to ease out the effects on a :hover interaction.
<body>
<span>
<img
src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/ada-lovelace.jpg"
alt="Ada Lovelace"
/>
</span>
</body>
span {
position: relative;
}
span::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 5rem rgba(7, 16, 48, 0.8);
transition: 180ms box-shadow;
}
span:hover img {
filter: none;
}
span:hover::after {
box-shadow: inset 0 0 0 rgba(7, 16, 48, 0.8);
}
<iframe height="240" src="https://codesandbox.io/embed/image-filter-vignette-0opgk?fontsize=14&hidenavigation=1&theme=dark" style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden" title="image-filter-vignette" width="320"></iframe>