Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .example { width: 400px; height: 300px; background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), #fff; background-size: cover; } .example:hover { background-blend-mode: luminosity; } </style> </head> <body> <h2>Convert an image into grayscale using HTML/CSS</h2> <div class="example"></div> </body> </html>