Remove blur effect from child element with relative position

Question

I am using material card and want to make background blur but don't want blur effect on a div.

<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 style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;" class="remo-card-image mdl-card mdl-shadow--2dp">   
  <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>

You can see the snippet, I want to remove blur effect form mdl-card__actions div.

I have tried previous solutions but nothing worked for me.

like - remove blur effect on child element

You can't have a child element ignore the parent's blur. Essentially the only option is to have two divs inside the parent, one for blur and one for not-blur. — Pratik, Jul 28 '19 at 06:34

score 3 · Accepted Answer · answered Jul 28 '19 at 06:24

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>

Remove blur effect from child element with relative position

1 Answers1