blur background

Greetings. I can’t find HOW to make the background blurred with css, I assume that beautifully with css is not yet possible.

For example, a block of 6 modules.

  1. I wanted to apply a blur for the background, when hovering, the blur (filter: blur) disappears, the burgundy translucent fill is: before, if you apply a blur to a class, the pseudo: before or: after will also blur, but this does not suit me. You need to blur only the background. How to do it? (Without javascript)
  2. In the second block, I decided to try to add a block inside the block, and add a block to blur the background. I do not know how to apply it with the effect: hover
  3. In the third case, I did: after with the text and: before with a blurred background. It is also not clear how to apply this to: hover

body{margin:0;padding:0;} .portfolio{ margin:0 auto; margin-top:50px; width:100%; min-height:450px; background:#ccc; display:grid; grid-template-columns:200px 200px 200px; grid-template-areas: "cell-1 cell-2 cell-3" "cell-4 cell-5 cell-6"; grid-template-rows:200px 200px; justify-content:center;/*вырванивание блоков по центру*/ align-content: center;/*прижимает блоки друг к другу*/ } .cell{ width:200px; /height:200px;/*включить если не указывать количество и высоту строк*/ background:pink; border:1px solid #444; position:relative; overflow:hidden; } .cell{margin-top:-1px;} .cell-1{grid-are:cell-1;} .cell-2{grid-area:cell-2;} .cell-3{grid-area:cell-3;} .cell-4{grid-area:cell-4;} .cell-5{grid-area:cell-5;} .cell-6{grid-area:cell-6;} @media screen and (max-width:640px){ .portfolio{ padding:20px 0; grid-template-columns:200px 200px; justify-content:center;/*вырванивание блоков по центру*/ grid-template-rows:repeat(3,200px); grid-template-areas: "cell-1 cell-2" "cell-3 cell-4" "cell-5 cell-6"; } } @media screen and (max-width:418px){ .portfolio{ padding:20px 0; justify-content:center;/*вырванивание блоков по центру*/ grid-template-columns:200px; grid-template-rows:repeat(6,200px); grid-template-areas: "cell-1" "cell-2" "cell-3" "cell-4" "cell-5" "cell-6"; } } /*position end-----------------------*/ .cell{ background: /*linear-gradient(/-----------------фон для текста внизу/ to bottom, transparent 80%, rgba(0,0,0,0.4) 80%),*/ url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; } /*cell-1-------------------------------*/ .cell-1{-webkit-backdrop-filter: blur(10px);} .cell-1:before{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(178, 48, 48,0.5); } /*------------------cell-2*/ .blur{ width:100%; height:100%; background: url(http://vic4884g.bget.ru/img/433H.jpg) no-repeat center; background-size:cover; filter:blur(2px); } .cell-2:after{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(178, 48, 48,0.5); left:0px; top:0px; } /*cell-3----------------------------------------*/ .cell-3:after{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(0,0,0,0.5); left:0px; } .cell-3:before{ content:""; position:absolute; width:200px; height:200px; background: url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; filter:blur(5px); } /* :before overflow:hidde; transition:1s; :not(:hover) */ 
 <div class="wrap"> <div class="portfolio"> <div class="cell cell-1">1</div> <div class="cell cell-2"><div class="blur">2</div></div> <div class="cell cell-3">3</div> <div class="cell cell-4">4</div> <div class="cell cell-5">5</div> <div class="cell cell-6">6</div> </div><!-- portfolio --> </div><!-- wrap -->

  • You show what effect you want to achieve in the end? According to the text description is not clear. Better to see once than hear a hundred times) - Stepan Kasyanenko
  • java and javascript are two different languages, correct the error in the title ... - Air

2 answers 2

 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #272727; } #wrapper { position: relative; width: 300px; height: 180px; overflow: hidden; text-align: center; line-height: 2; font-size: 35px; font-family: monospace; color: white; } p { position: absolute; z-index: 111; } #foto { position: absolute; width: 300px; height: 180px; background-image: url(http://livefomdet.ru/uploads/images/f/o/t/foto_krasivih_jaguarov.jpg); background-size: 100%; filter: blur(10px); transition: all 0.3s; } #wrapper:hover #foto { filter: blur(0); transition: all 0.3s; } 
 <div id="wrapper"> <p>FOTO <P> <div id="foto"> </div> </div>

  • Thanks, I probably will. * someone corrected the title =) - Victor Kas
  • @VictorKas java and javascript are different languages, so I fixed it - DaemonHK
  • Instead of thanks, one could accept the answer))))) - Air
  • This is my first post, not an experienced one), but then I clicked "accept" =) - Victor Kas
  • did not press)))))))) - Air

while experimenting it turned out some interesting effects with: hover (smooth) spread, who can come in handy

 body{margin:0;padding:0;} .portfolio{ margin:0 auto; margin-top:50px; width:100%; min-height:450px; background:#ccc; display:grid; grid-template-columns:200px 200px 200px; grid-template-areas: "cell-1 cell-2 cell-3" "cell-4 cell-5 cell-6"; grid-template-rows:200px 200px; justify-content:center;/*вырванивание блоков по центру*/ align-content: center;/*прижимает блоки друг к другу*/ } .cell{ width:200px; /height:200px;/*включить если не указывать количество и высоту строк*/ background:pink; border:1px solid #444; position:relative; overflow:hidden; } .cell{margin-top:-1px;} .cell-1{grid-are:cell-1;} .cell-2{grid-area:cell-2;} .cell-3{grid-area:cell-3;} .cell-4{grid-area:cell-4;} .cell-5{grid-area:cell-5;} .cell-6{grid-area:cell-6;} @media screen and (max-width:640px){ .portfolio{ padding:20px 0; grid-template-columns:200px 200px; justify-content:center;/*вырванивание блоков по центру*/ grid-template-rows:repeat(3,200px); grid-template-areas: "cell-1 cell-2" "cell-3 cell-4" "cell-5 cell-6"; } } @media screen and (max-width:418px){ .portfolio{ padding:20px 0; justify-content:center;/*вырванивание блоков по центру*/ grid-template-columns:200px; grid-template-rows:repeat(6,200px); grid-template-areas: "cell-1" "cell-2" "cell-3" "cell-4" "cell-5" "cell-6"; } } /*position end-----------------------*/ .cell{ background: /*linear-gradient(/-----------------фон для текста внизу/ to bottom, transparent 80%, rgba(0,0,0,0.4) 80%),*/ url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; } /*cell-1-------------------------------*/ .cell-1{z-index:0;} .cell-1:hover{z-index:20;} .cell-1:before{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(178, 48, 48,0.5); left:0; top:0; } .cell-1:hover:before{transition:0.5s;top:200px;left:200px;} .cell-1:not(:hover):before{transition:0.5s;} .cell-1:focus:before{transition:0.5s;top:200px;left:200px;} .cell-1:not(:focus):before{transition:0.5s;} /*------------------cell-2*/ .cell-2:after{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(178, 48, 48,0.5); left:0px; top:0px; z-index:10; opacity:1; } .cell-2:hover:after{transition: 0.5s; opacity:0;z-index:-1;} .cell-2:not(:hover):after{transition: 0.5s;filter:} /*cell-3----------------------------------------*/ .cell-3:after{ content:"some text"; font-size:30px; color:#fff; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(0,0,0,0.5); left:0px; bottom:0px; } .cell-3:before{ content:""; position:absolute; width:200px; height:200px; background: url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; filter:blur(5px); left:0px; } .cell-3:hover:after{bottom:200px;transition:0.5s;} .cell-3:not(:hover):after{transition:0.5s;} .cell-3:hover:before{top:200px;opacity:0;transition:0.5s;} .cell-3:not(:hover):before{transition:0.3s;} /*cell-4----------------------------------------*/ .cell-4:after{ content:"smooth effect"; font-size:30px; color:#fff; text-align:center; padding-top:70px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(0,0,0,0.5); left:0px; z-index:0; } .cell-4:hover:after{left:200px;transition:0.5s;} .cell-4:not(:hover):after{transition:0.5s;} .cell-4:before{ content:""; position:absolute; width:210px; height:210px; left:-5px; opacity:1; background: url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; filter:blur(5px); } .cell-4:hover:before{left:200px;opacity:0;transition:0.8s;} .cell-4:not(:hover):before{transition:0.5s;} /*------------------------------------------------cell-5*/ .cell-5:after{ content:"smooth effect"; font-size:30px; color:#fff; text-align:center; padding-top:70px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; background:rgba(0,0,0,0.5); top:0px; left:0px; } .cell-5:hover:after{top:200px;transition:0.5s;} .cell-5:not(:hover):after{transition:0.5s;} .cell-5:before{ content:""; position:absolute; width:210px; height:210px; left:-5px; top:0; opacity:1; background: url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; filter:blur(5px); } .cell-5:hover:before{top:200px;opacity:0;transition:0.1s;} .cell-5:not(:hover):before{transition:0.3s;} /*---------------------------cell-6*/ .cell-6:after{ content:"some text"; font-size:30px; color:#444; text-align:center; padding-top:80px;/*сдвигает текст*/ font-family:"Courier New", Courier, monospace; position:absolute; width:200px; height:200px; font-weight:bold; left:0px; top:0px; z-index:10; opacity:1; } .cell-6:before{ content:" "; font-size:30px; color:#fff; text-align:center; font-family:"Courier New", Courier, monospace; position:absolute; width:210px; height:210px; background: url(http://vic4884g.bget.ru/img/421H.jpg) no-repeat center; background-size:cover; left:-5px; top:-5px; z-index:9; filter:blur(5px); } .cell-6:hover:after{transition: 0.5s; opacity:0;z-index:-1;} .cell-6:not(:hover):after{transition: 0.5s;filter:} .cell-6:hover:before{transition: 0.5s; opacity:0;z-index:-2;} .cell-6:not(:hover):before{transition: 0.5s;filter:} 
 <div class="wrap"> <div class="portfolio"> <div class="cell cell-1">1</div> <div class="cell cell-2"><div class="blur">2</div></div> <div class="cell cell-3">3</div> <div class="cell cell-4"><span>smooth effect with in left side</span></div> <div class="cell cell-5">5</div> <div class="cell cell-6">6</div> </div><!-- portfolio --> </div><!-- wrap -->