Tell me please, how can this effect be achieved? It is blur (above) over the picture? thank

css blur only on top

  • 2
    Either throw the box-shadow from the blue block to the picture, or use filter: blur () for the block, but the first option is preferable. - smellyshovel
  • Online gradient generator for every taste colorzilla.com/gradient-editor - Andrey

2 answers 2

For example, using the box-shadow property:

 .box { background: transparent url(https://images.unsplash.com/photo-1472157510410-64a053cbc39f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=564&q=80&cs=tinysrgb) center no-repeat; -webkit-background-size: cover; background-size: cover; max-width: 300px; min-height: 450px; position: relative; overflow: hidden; } .text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 1rem 1rem; font-family: sans-serif; font-size: 1.2rem; line-height: 1.5rem; background: #40a7f4; color: #fff; } .text p { position: relative; z-index: 2; } .text:before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 5px; height: 20px; box-shadow: 0px -10px 35px 15px rgba(64, 167, 244, 0.98); } 
 <div class="box"> <div class="text"> <p> Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit. <br> Eaque, sed. </p> </div> </div>

Or like this: using the filter: blur(Npx); :

 .box { background: transparent url(https://images.unsplash.com/photo-1472157510410-64a053cbc39f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=564&q=80&cs=tinysrgb) center no-repeat; -webkit-background-size: cover; background-size: cover; max-width: 300px; min-height: 450px; position: relative; overflow: hidden; } .text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 1rem 1rem; font-family: sans-serif; font-size: 1.2rem; line-height: 1.5rem; background: #40a7f4; color: #fff; } .text p { position: relative; z-index: 2; } .text:before { content: ''; position: absolute; z-index: 1; left: -10px; right: -10px; top: -30px; height: 100px; background: #40a7f4; /* box-shadow: 0px -10px 35px 15px rgba(64, 167, 244, 0.98); */ -webkit-filter: blur(11px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 
  <div class="box"> <div class="text"> <p> Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit. <br> Eaque, sed. </p> </div> </div>

  • Not quite good solutions, blur heavy, box-shadow will generate too much (4 sides + corners) on such a large blur it is a good load, it is better to use a linear gradient. - Artem Gorlachev

Not sure about the correctness of the decision, but maybe it will push you to thoughts.

 .container { position: relative; width: 250px; } img { display: block; } .content { background: linear-gradient(180deg, rgba(0,150,150,0.1), rgba(0,150,150,1) 25%); position: absolute; bottom: -50px; left: 0; width: 100%; } .title { color: #fff; font-size: 50px; } .time { color: #fff; font-size: 25px; } 
 <div class="container"> <img src="http://www.greenrussia.ru/decor/uploads/posts/foto-yaponskogo-sada.jpg"> <div class="content"> <div class="title">Title</div> <div class="time">5 days</div> </div> </div>