Как нанести матовое стекло на несколько элементов

Question

Я хотел бы получить эффект матового стекла для каждой квадратной сетки, но я не хочу размывать текстовое содержимое, которое идет под div. До сих пор я пытался использовать фильтр CSS (размытие), но не работал, как ожидалось.

Я понятия не имею, как применить эффект фильтра размытия к исходному содержимому (<div class="post">) и использовать псевдо :after или :before для добавления внутренних теней.

Вот чего я хочу добиться: Матовое стекло - HTML CSS TWEAKS

body {
  background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
  background-color: #F8F8F8;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

* {
  box-sizing: border-box;
}

.container-fluid {
  max-width: 1000px;
}

.navbar-default {
  background-color: #fff;
}

.post {
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.post h1 {
  margin-top: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 22px;
}

.post .img-responsive {
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row js--eqc-section">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="post js--eqc-item">
        <h1>Lorem ipsum dolor.</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="post js--eqc-item">
        <h1>Expedita et, totam.</h1>
        <p>Eaque quibusdam non veritatis nihil soluta animi repellendus rerum at alias provident, numquam sed doloremque quisquam iure recusandae natus, laudantium quis nostrum!
        </p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="post js--eqc-item">
        <h1>Omnis sit, recusandae.</h1>
        <p>Earum incidunt in saepe cupiditate culpa reprehenderit atque, ab ipsum illum commodi nam nostrum quos blanditiis!</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="post js--eqc-item">
        <h1>Veritatis, adipisci, molestias.</h1>
        <p>Hic cupiditate temporibus, nulla modi asperiores nesciunt rerum debitis reprehenderit aut non commodi corporis.</p>
      </div>
    </div>
  </div>

</div>

Answer 1

Для тех, кто хочет знать ответ сразу, вот мой фрагмент кода, который подходит для моего случая.

body {
  background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
  background-color: #F8F8F8;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container-fluid {
  max-width: 1000px;
}

.navbar-default {
  background-color: #fff;
}

.post {
  color: white;
  padding: 15px;
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

.blur_box {
  z-index: 0;
  position: relative;
  overflow: hidden;
}

.blur_box:before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  left: -100%;
  top: -100%;
  background: url(https://source.unsplash.com/IvfoDk30JnI/1500x1000) no-repeat center center fixed;
  filter: blur(20px);
  z-index: -2;
}

.col-xs-12,
.col-sm-6,
.col-md-4 {
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="blur_box">
        <div class="post">
          <h1>Lorem ipsum dolor.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error officiis dolore ipsum similique!</p>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="blur_box">
        <div class="post">
          <h1>Expedita et, totam.</h1>
          <p>Eaque quibusdam non veritatis nihil soluta animi repellendus rerum at alias provident, numquam sed.
          </p>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="blur_box">
        <div class="post">
          <h1>Voluptatum, odit, ipsam.</h1>
          <p>Debitis esse minus ad, ex a perspiciatis sunt numquam ullam reiciendis sed similique amet nulla natus quos voluptas, itaque. A dolores asperiores fuga ratione, illum quas quo, doloremque provident repudiandae.</p>
        </div>
      </div>
    </div>

  </div>

Answer 2

Вы можете сделать это в CSS с непрозрачностью.

W3 Непрозрачность школы

Ваш код в css будет:

.post {
  opacity: 0.8;
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}

Если вы наводите курсор на элемент:

.post:hover{
    opacity: 1;
}

Если вы хотите, чтобы текст в <div class="post"> не был с opacity, попробуйте использовать:

.post h1{
   z-index: 1;
}

или

.post h1{
   opacity: 1 !important;
}