Disable blur effect on child element with relative positioning

Is there a way to create a background blur effect using material cards without affecting a specific 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>

I need help removing the blur effect from the mdl-card__actions div while keeping it on other elements.

Any suggestions or solutions would be greatly appreciated!

Links to similar discussions: remove blur effect on child element

htmlcssmaterial-design

Answer №1

It is recommended to place the background as a div next to the actions div rather than as a parent div.

Here's how you can do it:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery's slide toggle function is limited to toggling the visibility of just one section at

Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...

jqueryhtmlcssslidetoggle

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

javascriptjqueryhtmltwitter-bootstrap

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

Issues with functionality of JavaScript calculator in HTML forms

Currently, I am working on creating a basic perimeter calculator specifically designed for a projector screen. This code is intended to take the response from a radio button input and the diagonal length in order to accurately calculate the perimeter base ...

javascripthtmlformscalculator

Tips for aligning a dropdown directly below its corresponding link

Is there a way to center the drop down in the code snippet below, right under its corresponding link? I plan on using jquery for the show/hide functionality, but I'm struggling to get it to align properly under the letter r, which will eventually be a ...

css

Troubleshooting Material-UI Menus

I need the menu to adjust its height dynamically as the content of the page increases vertically. Even though I have applied "height:100%" in the styles, it doesn't seem to work. Can anyone assist with this issue? Here is the code snippet: import R ...

javascriptcssreactjsmaterial-uimenu-items

Styling only for Angular 2 Components

How can component scoped styles be used to style elements differently based on their location within the site while still maintaining style scoping? For example, when using a "heart like" item created in this course, how can padding be added specifically i ...

javascriptcssangular

Trouble with Bootstrap 3: Footer refusing to stay at bottom of page

At work, I was given the task to create a mini-webpage layout using bootstrap. I decided to use an existing layout called Amoeba as my base. You can view the preview here. Everything was working almost perfectly on the localhost, except for the footer. If ...

csstwitter-bootstrapfooterfluid-layout

The behavior of the jQuery slick slider is acting oddly

Currently, I have implemented the Slick Slider for my product loop in order to display the products in a slider format. However, upon the initial page load, there appears to be a significant white gap below the products. Interestingly, when I interact with ...

javascriptjqueryhtmlcssslider

Configuring static files in Django for hosting a website in production mode

I have been attempting to serve my static files from the same production site in a different way. Here are the steps I took: First, I updated the settings.py file with the following: DEBUG = False ALLOWED_HOSTS = ['12.10.100.11', 'localhos ...

pythonhtmlcssdjango

What is the best way to achieve text elements overlapping each other in CSS?

Imagine having the following HTML: <div> hello <div>hello</div> </div> Wouldn't it be cool if those two texts overlapped perfectly in the center? It doesn't matter which one overlaps the other. Do you think it' ...

css

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

What is the best way to add color to a div at the bottom of a page using

https://i.sstatic.net/5kOt7.png I noticed in the image that there is a navy blue color applied to a div at an angle. How can I achieve this effect using Bootstrap in my ASP.NET Core project? ...

htmlbootstrap-4asp.net-core-mvc

Ways to align div elements

I am currently in the process of developing my own custom animation player. Utilizing Three.js for object rendering has been successful so far. However, the challenge lies in incorporating control options at the bottom of the player interface (such as play ...

javascriptjqueryhtmlcss

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

htmlcss

Is there a way to generate PDF files from rrdcgi output?

I have developed an rrdcgi script to showcase system performance data through graphs. I am now seeking a way to allow users to generate PDFs on the spot, containing the current page's images and information along with header and footer details. Additi ...

htmlperlrrdtool

Swap File Field for Picture Graphic - HTML/CSS

I am looking to enhance the appearance of my form by replacing the generic File Field with a more aesthetically pleasing Image Icon. If you click on this Camera Icon, it will open up a Browse window: For a demonstration, check out this JsFiddle link: htt ...

htmlcss

The CSS background cannot be blurred

After constructing a basic HTML page, I decided to incorporate the following CSS code: html { background: url("photourl") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover ...

css

Effective ways to enable users to upload files in a React Native app

Being in the process of developing a react native app, I am faced with the challenge of allowing users to easily upload files from their mobile devices (pdf, doc, etc). Unfortunately, my search for a suitable native component has proven fruitless. Can anyo ...

cssjavascriptreact-native

Is it possible to rearrange the order of rows and columns based on the viewport size?

Is it possible to achieve two different layouts with Bootstrap 5 based on the viewport size? I want to avoid using display:none and JS/Jquery tricks if possible. I attempted to accomplish this by utilizing Bootstrap 5 tools, but encountered issues on lar ...

htmlcsstwitter-bootstrapbootstrap-5