Johnny Johnny - 2 months ago 6
CSS Question

How can I blur div tag and edit index?

I have nested div tags. I want to change their z-index value and make blur which is on back position. But it's not working. I think, in my codes only back div is blurred but my inputs are blurred as well which are located in front div. Thank you for your helps.



.div_front{
background-color: antiquewhite;
}

.div_back
{ border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
filter: blur(2px);
z-index: -1;
}

<div class="div_back">
<div class="div_front">
<form>
<label for="username"></label>
<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
<label for="password"></label>
<input type="text" id="password" name="password" style="text-align:center" placeholder="password">
<input type="submit" value="Sign In">
<div style="display:flex; padding:0px;">
<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
<input type="submit_signup" value="Sign Up">
</div>
</form>
</div>
</div>




Answer

you can achieve this by putting div_back in absolute position in new .container

check the edit in the HTML

.div_front{
	background-color: antiquewhite;
}

.div_back
{   border-radius: 5px;
    background-color: #f2f2f2;
    filter: blur(2px);
    z-index: -1;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
}
.container{
    position:relative;
    padding: 20px; 
}
<div class='container'>
<div class="div_back">
			
</div>
<div class="div_front">
			<form>
					<label for="username"></label>
					<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
					<label for="password"></label>
					<input type="text" id="password" name="password"  style="text-align:center" placeholder="password">     
					<input type="submit" value="Sign In">	
					<div style="display:flex; padding:0px;">
					<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
					<input type="submit_signup" value="Sign Up">
					</div>
				</form>
			</div>		
  </div>

Comments