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