Apply a CSS filter only on background

Question

In the following snippet, I have applied a blur filter on .sub-menu but I the text is also filtered.

How can I apply the blur filter only on the

Answer 1

You can apply the blur filter on a pseudo element and stack it behind the .sub-menu content :

.sub-menu {
  list-style: none;
  position: relative;
  float: left;
  margin: 0px;
  padding-left: 0px;
  z-index: 1;
}
.sub-menu li a {
  display: block;
  color: #888888;
  text-decoration: none;
  font-size: 14px;
  line-height: 32px;
  padding: 0 12px;
}
.sub-menu li a:hover {
  color: black;
}
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0
}
.sub-menu:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:url('http://lorempixel.com/output/nature-q-c-640-480-6.jpg');
  background-size:cover;
  -webkit-filter: blur(10px);
  /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

  
EDIT BOOK
    

      
NEW
        
BROWSE
          
APPROVAL