Is there a way to apply a blur effect to just the div itself without affecting its contents

    <style type="text/css">
.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#no-blur{

    z-index: 20;
}
.box{
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
</style>    

<div class="inner-container">
            <div class="box">
                <div id="no-blur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

i am attempting to remove the blur effect applied to the "noblur" div in order to only blur the box and not its inner elements. However, setting the blur value to 0 did not result in any changes. here is the CSS result of the page

htmlcss

Answer №1

Regrettably, when you apply a blur (or transparency) to an element, it will also affect all of its child elements.

To overcome this issue, you can extract the contents of the blurred box and position them as a sibling using CSS to place them on top.

Answer №2

To prevent blurring all children inside an element, a workaround is to apply the blur effect on a separate element positioned below the content.

.inner-container {
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur {
    z-index: 20;
}
.blurbox {
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.13);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
.box {
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    padding:30px 0px;
    z-index: 2;
}
    <style type="text/css">

</style>    

<div class="inner-container">
  <div class="blurbox"></div>
  <div class="box">
    <div id="noblur">
      <h1> Login </h1>
      <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
      <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
      {% if error is defined %}
          <span class="error">{{ error }}</span>
      {% endif %}
  <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>
    </div>
  </div>
</div>

Answer №3

To add a blur effect to .box:before using CSS positioning, you can utilize the pseudo element (:before). Also, keep in mind that z-index works with positioning, so be sure to give the #noblur a position as well.

#noblur {
    position: relative;
    z-index: 20;
}

.box {
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.13);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}

You can see the working snippet below:

.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur{
    position: relative;
    z-index: 20;
}
.box{
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb');
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}
<div class="inner-container">
            <div class="box">
                <div id="noblur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

We hope this solution is beneficial!

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

When a div slides down on page load, the div will slide up when a button is clicked

I am trying to make a div slideDown on page load. The goal is to have the div automatically slideDown after 2 seconds, which contains a responsive image and a button named "z-indexed". However, I am having trouble getting the same div to slideUp when the z ...

jqueryhtmlcssslidedownslideup

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float

HTML: Deconstruct, Analyze, and Revamp for a mobile-friendly site

I am currently working on a project for my computer science class in which we are required to choose an application that interests us and understand how it functions. I decided to focus on the technology provided by dudamobile.com This particular app is d ...

htmlweb-applicationsmobilecomputer-science

Clearing all data in a form upon opening

Within a single portlet, I have organized two forms under separate tabs. What I am aiming for is that whenever I switch to tab 2, all fields within its associated form should automatically be cleared without the need for a button click. Even after attempti ...

javascripthtmljqueryformsjquery-events

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

How to position a Bootstrap 4 button group at the bottom of a flexbox container

I am working with HTML code that looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="border d-flex align-items-baseline m-2 p-2" style="width: 400px"> < ...

cssbootstrap-4flexbox

Experiencing difficulties with toggling the visibility of div elements when an onchange event occurs

I am experiencing some difficulties triggering an on-change event in the department drop-down field and I'm not certain if I've written it correctly. The error message indicates: Uncaught TypeError: Cannot read property 'style' of null. ...

phphtmlcodeigniter

Implementing jQuery function to hide or show content upon page load

Is there a way to have the content hidden when the page is first opened, but then revealed once a button is clicked? Any suggestions? <script> $(document).ready(function(){ $("#rooms").click(function(){ $("#rooms_box").show(); }); $("#faciliti ...

jqueryhtmlshow-hide

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

Validating PHP code to ensure that either one of two form fields is filled in

I have been working on a website that utilizes javascript for various functions and PHP-based Captcha code to validate form fields. Everything is functioning well, but the form can still be submitted even if none of the fields are completed. I require at ...

phphtmlformsfieldrequired

designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. ...

htmlcssbootstrap-4responsive-design

How to Include HttpClient in an Angular Service

Looking for a service that utilizes http requests? import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root&a ...

htmlangularangularjstypescript

Customize one header to display different banners on each page using PHP conditionals

I created my website for entertainment purposes and I decided to use different banners on each page. Currently, in my header section, random banners appear using the following code: <div style=' height:145px; background-image:url(images/banners/ba ...

phphtmlif-statementheaderbanner

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

javascripthtmlimage-processingcanvascanny-operator

unique HTML elements located inside a text box

I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...

htmlcss

Is it possible to resize an image while also adjusting the size of its container using CSS?

I have a block of content with an image sandwiched between paragraphs. <p class="bodytext">aslkjfsdlkfj f ldflskl</p> <p class="image"><img src=1.png/></p> <p class="bodytext">aslkjfsdlkfj f ldfl ...

csscss-paged-media

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

When using @RestController in the following code, the HTML file is not being returned properly in the REST API. Instead, only the file name such as 'index' is displayed on the screen

Having trouble getting the HTML file to return in the Rest API. Only returning the file name like 'index' when using @RestController, but works fine with @Controller. I am working on a Spring Boot REST application and utilizing index.html with Bo ...

javahtmlspring-bootrestspring-mvc

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Hey there! I recently implemented smooth scrolling on my website, but it seems to only work on single-page layouts. How can I make it function properly within an absolutely positioned scrollable element? Here are the link to my website and the correspond ...

javascriptjqueryhtml