View All Pages

4.13 Examples

Grayscale Example:

HTML

<html>
    <head>
        <title>Grayscale Image Example</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h2>Original Image</h2>
        <img src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
        
        <h2>Grayscaled Image</h2>
        <img class="grayscale" src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
    </body>
</html>

CSS

img {
    height: 200px;   
}

img.grayscale {
    filter: grayscale(100%);
}

Blur Example

HTML

<html>
    <head>
        <title>Blur Filter Example</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h2>Original Image</h2>
        <img src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
        
        <h2>Blurred Image</h2>
        <img class="blur" src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
    </body>
</html>

CSS

img {
    height: 200px;   
}

img.blur {
    filter: blur(3px);
}

Hue Example

HTML

<html>
    <head>
        <title>Hue Rotation Example</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h2>Original Image</h2>
        <img src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
        
        <h2>Hue Rotated Image</h2>
        <img class="hue-rotate-filter" src="https://codehs.com/static/img/library/landscapes/flowers.jpg">
    </body>
</html>

CSS

img {
    height: 200px;   
}

img.hue-rotate-filter {
    filter: hue-rotate(90deg);
}