Blur Only Background

You're selecting the "show-dates" class, which is the class of your h2 element, so it will affect all of the contents of your h2 element.

Unfortunately there isn't a "background opacity" option in CSS. The workaround I've used for this was creating a separate div element and essentially layering it over the existing element where you want it to blur. You can do this with the z-index option in css, basically putting the image you want to blur behind your h2 element - similar to setting it as a background image, but allowing you to target them separately.

so your html would look something similar to this

<div id="section">
  <div id="background">
    <img src="guitar1.png">
  </div>
  <section id="shows">
     <h2 class="show-dates"> <a href="tour.html"> Show Dates </a> </h2>
  </section>
</div>

And your css would include

#section {
  position: relative;
}

#background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transition: all .6s;
}

#background:hover {
  opacity: .6;
  filter: blur(.5px);
}

It technically works but it creates other problems such as displaying the full image and all other sections intrude into the section get blurred.

Hi Michael,

You could use the ::before pseudo element and apply your background image to that. The pseudo element should be sized the same as the h2 and absolutely positioned. You can then set a z-index of -1 so it appears below the h2. This way you give off the appearance that you're affecting only the background of the h2.

The h2 should have a position of relative.

This is untested but something like the following:

.show-dates {
  position: relative;
  padding: 5em;
}

.show-dates::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background-image: url("guitar1.jpg");
  background-position: 50% 5%;
  background-size: cover;
  transition: all .6s;
}

.show-dates:hover::before {
  opacity: .6;
  filter: blur(.5px);
}

You may have to make some adjustments with padding and/or positioning but hopefully this gets you close.

Use a single colon for before if you have to support IE8

Thanks guys, with the advice and the help of my web mentor I was able to get it working!