Question: Okay, so I have an image for a background that has 1px of a blur filter in the CSS. 

That works. 

*Then*, I added a CSS :hover selector to a *new* CSS rule that changes the blur filter to 0. 

When I hover over it on the browser, however, it doesn't change the blur at all! (I went into Google Chrome Inspect Element and used the handy feature of forcing the :hover selector, and then it worked. So I know it's not the CSS that's buggy.)

How can I get this to work? It's a blur filter on a div in a header. Any ideas?

```
    <header>
        <div id="bgimage"></div>
        <nav>
            <a href="home.html" title="Click to go to the homepage.">Home</a>
            <span class="divider">-</span>
            <a href="cakes.html" title="Click to see types of cakes.">Types of Cake</a>
        </nav>
        <h1>Cakes</h1>
    </header>

body header {
    width:100%;
    text-align:center;
    box-shadow:0 4px 4px 4px rgba(0,0,0,0.2);
    z-index:4;
    position:relative;
    background-color:linear-gradient(CornFlowerBlue,RoyalBlue);
}
body header div#bgimage {
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-image:url(hydrangea-cakes-2.jpg);
    filter:blur(1px);
    position:absolute;
    width:100%;
    height:100%;
}

```

The important parts of the HTML are the header and the div id="bgimage"

Answer: 
You haven't already added the `:hover` pseudo-class.

```css
#bgimage:hover {
  /* the styles you want to display on hover */
}

```
You did not add the `:hover` part of the CSS but it works for me if I just add this to the CSS:

```
#bgimage:hover {
  filter: none;
}

```