CSS blurred overlay, position the blurred div at the bottom of the container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

CSS blurred overlay, position the blurred div at the bottom of the container

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from  w ww.j av a  2 s  . c o m-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:cover;
}

.frosted::before {
   position:absolute;
   margin:-9px 0 0 -9px;
   content:"";
   left:0;
   top:0;
   width:calc(17px + 100%);
   height:calc(17px + 100%);
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') fixed;
   background-size:cover;
   -webkit-filter:blur(9px);
   -moz-filter:blur(9px);
   -ms-filter:blur(9px);
   -o-filter:blur(9px);
   filter:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   z-index:-3;
}

.frosted::after {
   position:absolute;
   content:"";
   left:0;
   top:0;
   width:100%;
   height:100%;
   background:yellow;
   z-index:-2;
}

.frosted {
   font-family:Avenir Next, Avenir, Verdana, sans-serif;
   font-weight:601;
   font-size:33px;
   color:blue;
   position:absolute;
   margin:21px;
   padding-left:17px;
   width:100%;
   height:100px;
   border:2px solid pink;
   bottom:0;
}
</style> 
 </head> 
 <body> 
  <div class="frosted"> 
   <p>Lorem ipsum dolo</p> 
  </div> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
   <defs> 
    <filter id="blur"> 
     <fegaussianblur stdDeviation="5" /> 
    </filter> 
   </defs> 
  </svg>  
 </body>
</html>

Related Tutorials