Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> div { width: 450px; height: 400px; } .example{ background: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"), linear-gradient(0deg, white 33%, black 66%), url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"); background-position: 0px 0px, 0px 0%, 0px 0px; background-size: cover, 100% 300%, cover; background-blend-mode: luminosity, multiply; transition: all 1.5s; } .example:hover { background-position: 0px 0px, 0px 70%, 0px 0px; } </style> </head> <body> <h2>Konvertieren eines Bildes in Grauwert mit HTML/CSS</h2> <div class="example"></div> </body> </html>