Remove Blur Effect on Child Element

How to blur(css) div without blur child element

How to disable blur on child element?

.enableBlur>* {  filter: blur(1.2px);}
.disableBlur {  filter: blur(0);}

<div class="enableBlur">  <hr>  qqqqq<br>  <span>qqqqq</span><br>  <hr  class="disableBlur">  <div>aaaaa</div>  <div>bbbbb</div>  <div class="disableBlur">DDDDD</div>  <hr>  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"></div>

remove blur effect on child element

Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.

<div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="Sample Image" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div>

Use Css

.content{
    float: left;
    width: 100%;
}

.content .overlay{
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}

.opacity{
    background-color: rgba(5,98,127,0.9);
    height:100%;
    overflow:hidden;
    position:relative;
    z-index:10;
}

Remove blur effect from child element with relative position

You should add the background as div next to actions div not as parent div.

Try this

 .overlay {      position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;   }  .mdl-card__actions {     z-index: 2;  }

<body>    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"><script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="remo-card-image mdl-card mdl-shadow--2dp">     <div class="overlay" style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;"></div>  <div class="mdl-card__title mdl-card--expand"></div>        <div class="mdl-card__actions">      <span class="remo-card-image__filename">        <button> 278728</button>      </span>       </div>  </div>

how do i blur the div only and not its elements

Unfortunately, if you blur (or use transparancy) on an element, this will effect all child elements as well.

The only way around this is to take the contents of the blurred box and place it as a sibling. Than use some CSS to position it on top.

Disable Blur filter on child containers

A few notes:

there is no background HTML tag,
when you are applying filters remember to not only use the -webkit-
there is no font-face attribute to declare the font you are using, instead you should use font-family

With this in mind, a solution for your problem is creating a empty child div and applying the filter to that same empty div which must have a lower z-index then its siblings (as you already had)

Here is a snippet:

@font-face {  font-family: "Candy";  src: url('font/Candy.otf') format("opentype");}@font-face {  font-family: "DancingScript";  src: url('font/DancingScript.ttf') format("truetype");}body {  margin: 0;  padding: 0;}div {  position: absolute;  background: url("http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg") no-repeat;  display: block;  height: 100%;  width: 100%;  z-index: 0;  -moz-filter: blur(10px);  -o-filter: blur(10px);  -ms-filter: blur(10px);  filter: blur(10px);}
header {  font-family: "Candy";  font-size: 150px;  text-align: center;  color: #FFF;}nav {  color: #FFF;  font-family: "DancingScript";  font-size: 25px;}nav ul {  list-style: none;  margin: 0;  padding: 0;}nav li {  display: inline-block;}header,nav {  display: block;  position: relative;  z-index: 9999;}

<main>  <div></div>  <header>Rustic Rentals</header>  <nav>    <ul>      <li>Rentals</li>      <li>Sales</li>      <li>Contact</li>    </ul>  </nav></main>

CSS remove blur filter on one child

Put your Card inner to an own container and assign the the filter to that container.

The link should be place outside.

<div class="left__card">
  <div class="blurry">
    <div class="left__card--head">
      <img src="../images/Rawand.jpg" alt="Img" />
    </div>
    <div class="left__card--body">
      <div class="row">
        <h1 class="Name">Rawand Rebwar</h1>
        <h2 class="stage">2'nd Stage</h2>
      </div>
      <p class="paragraph">
        Im computer science student in university of sulaimany , i developed front end for this project..
      </p>
    </div>
  </div>
  <a href="#" class="profile">Click To See Profile</a>
</div>

.left__card:hover .blurry {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
}

Remove CSS filter on child elements

You can't do it that way. Childs are affected by their parent style.

That's how Cascading Style Sheets works.

I suggest you to use a pseudo-element to make it work like you want, so that only the pseudo-element would be affected.

See comments in the snippet:

.main {  position: relative;   /* Added */  width: 300px;  height: 300px;  list-style: none;}
.main::before {   /* Added */  content: '';  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background-color: blue;  transition: 0.5s;}
.button {  position: absolute;  top: 35%;  height: 30px;  width: 120px;  display: none;  z-index: 99;  background-color: black;  color: white;}
.icon {  width: 30px;  position: absolute;  z-index: 99;  display: none;  width: 100px;}
.main:hover>.button {  display: block;  /* filter: none; Commented */}
.main:hover>.icon {  display: block;  /* filter: none; Commented */}
.main:hover::before {   /* Modified */  filter: brightness(50%);}

<li class="main">  <img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />  <a class="button" href="#">Button</a></li>

Blur event triggered by click on child element

The solution for all of my problems was the focusout event. It also detects focus inside an input child element. focusout