CODEWITHSUNDEEP
css
Dreams
Dreams

Reputation: 8506

Apply a CSS filter only on background

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 background and not the text?

.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;
  -webkit-filter: blur(10px);  /* Chrome, Opera */
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  padding: 0
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav navbar-nav">
  <li><a href="#">EDIT BOOK</a>
    <ul class="sub-menu">
      <li><a href="#">NEW</a>
        <li><a href="#">BROWSE</a>
          <li><a href="#">APPROVAL</a>
    </ul>
    </li>
</ul>

Upvotes: 6

Views: 8153

Answers (3)

ryanrain
ryanrain

Reputation: 4837

Use the backdrop-filter property on the child element. Docs

It now has sufficient browser support, although in 2023 you'll probably still want to also include a -webkit- prefix.

Upvotes: 0

Paweł Smołka
Paweł Smołka

Reputation: 638

I suggest more to add separate div wich is blured and put your sub-menu over it:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.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:0;
    left:0;
    padding:0
}
.blured{
    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);   
    filter: blur(10px);
}
</style>

          <ul class="nav navbar-nav"> 
            <li><a href="#">EDIT BOOK</a>
              <div style="position:relative">
                <div class="blured">
                    bla bla <br> bla bla bla
                </div>
              <ul class="sub-menu">
                <li><a href="#">NEW</a>
                <li><a href="#">BROWSE</a>
                <li><a href="#">APPROVAL</a>
              </ul>
              </div>
            </li>
          </ul>

Upvotes: 0

web-tiki
web-tiki

Reputation: 103770

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);
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav navbar-nav">
  <li><a href="#">EDIT BOOK</a>
    <ul class="sub-menu">
      <li><a href="#">NEW</a>
        <li><a href="#">BROWSE</a>
          <li><a href="#">APPROVAL</a>
    </ul>
    </li>
</ul>

Upvotes: 5

Related Questions