Menu

Tech

English

Blurred Hero Image

Part of the CSS Mastery section of Coddy's HTML journey — lesson 43 of 43.

Challenge

Easy

There is an image of New York City in the .gallery section.
Your task is to apply a blur filter with a value of 2px to it using CSS.

Try it yourself

<html>
<head>
  <title>Blurred Hero Image</title>
  <style> 
    /* Add your CSS styles here: */
    img {
    width: 100%;
    }
  </style>
</head>
<body>
    <div class="gallery">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg
">
    </div>
</body>
</html>

All lessons in CSS Mastery

1Selector Mastery – Combination

Introduction Descendant Selector Child Selector Adjacent Sibling Selector General Sibling Selector Recap Challenge

4Dropdown Menu Project

Add the Submenu Show the Submenu More styling Input and button

7Build with CSS Grid

Grid Basics Grid-row Item Placement Named Areas Recap Challenge

2Interactive Pseudo-Classes

Pseudo-Classes Hover Effects Focus Effects Active Styles Recap Challenge

5Visual effects

Gradients CSS Filters Transform Transitions & Hover Effects Recap Challenge

8Flavor Fiesta website

Setting the grid Header The main part Footer

3Structural pseudo-classes

Structural pseudo-classes Targeting the First Child Targeting the Last Child Pattern Power: Using nth-child Recap Challenge

6Landing Page

Style the Header Section Style the button Section Layout Card Layout Add Finishing Touches

9Final Challenges

Highlight Active Menu Zebra Table Rows Button Hover Effect Grid Card LayoutBlurred Hero Image