Проблема с размытым фоном светового короба?

Question

Я пытаюсь создать эффект размытого фона для моего лайтбокса, а фильтр размытия css не работает, и вместо этого он размывает весь лайтбокс.

Любая помощь будет принята с благодарностью.

Мой код - css no javascript, и кажется, что он не работает без размытия переднего плана.

Я пробовал фильтр размытия, и я думаю, что это не относится к странице, когда изображение лайтбоксащелкнул.

Изображение с размытым передним планом и чистым фоном

.container
{
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.small
{
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: .6s ease;
  filter: brightness(95%);
 }
.small:hover
{
  transform: scale(1.03);
  transition: .15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}
.lightbox
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.825);
  filter: blur(5px);
}
a div
{
 position: relative;
 margin: auto auto;
 text-align: center;
}

.lightbox:target
{
display: flex;
}

<div class="container">
 <a href="#img1"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
</a>
 <a href="#img2"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
 <a href="#img3"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
</a>
  <a href="#img4"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img5"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img6"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img7"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img8"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img9"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img10"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img11"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img12"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>

  <a href="#_" class="lightbox" id="img1">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 12 -</h6>
      <h4>This traditional extension ? in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img2">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 11 -</h6>
      <h4>This contemporary dormer extension ? in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img3">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 10 -</h6>
      <h4>This contemporary extension ? in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img4">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Huddersfield _ December 2018</h3>
      <h6>- 9 -</h6>
      <h4>This contemporary garden room ? in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against the wall.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img5">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Leeds _ November 2018</h3>
      <h6>- 8 -</h6>
      <h4>This contemporary extension ? in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img6">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ August 2018</h3>
      <h6>- 7 -</h6>
      <h4>This traditional garden room ? in Barnsley was designed to replace existing outhouses and to make use of the sunlight to the rear of the garden. This project also involved the redesign of the parking to the rear of the property.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img7">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ July 2018</h3>
      <h6>- 6 -</h6>
      <h4>This contemporary extension ? in Barnsley has a cedar cladding section over a corner of glazing to allow for views of the garden, it also has a raised patio to allow for level access to a seating area.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img8">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ June 2018</h3>
      <h6>- 5 -</h6>
      <h4>This traditional extension ? in Barnsley is on the ground floor and extends the kitchen to create a open plan layout and also emulates the traditional style of the house.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img9">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Visual | Huddersfield _ May 2018</h3>
      <h6>- 4 -</h6>
      <h4>This visual ?‍? was created to depict the rear of a traditional new build home, that has a contemporary extension in Huddersfield. The house was designed by Northern Design Partnership in Holmfirth.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img10">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Holmfirth _ March 2018</h3>
      <h6>- 3 -</h6>
      <h4>This contemporary garden room ? in Holmfirth was designed to provide a space for guests to stay in while also having a small shower room behind the stone cladding.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img11">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Porch | Huddersfield _ June 2017</h3>
      <h6>- 2 -</h6>
      <h4>This traditional stone clad porch ? in Huddersfield was designed and had building drawings produced by us. It emulates the traditional style of the property and uses the same materials.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img12">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ July 2016</h3>
      <h6>- 1 -</h6>
      <h4>These visuals depict the interior of a contemporary garden room ? in Barnsley and it provides a space for guests to stay in while also doubling up as a painting room.</h4>
    </div>
 
  </a>
  </div>

Answer 1

Редактировать

Добавлено после того, как Аскер дал понять, что он хочет что-то другое

Если вы хотите, чтобы полный фон был размытым, вам нужно изменить структуру HTML.Поскольку вы реагируете на псевдоэлемент :target для отображения лайтбокса, необходимо, чтобы элементы реагировали на показанный лайтбокс, следуя лайтбоксу, чтобы использовать общий комбинатор родных элементов ~.Таким образом, все лайтбоксы должны предшествовать элементу .container, а этот элемент .container размыт, если есть какой-либо .lightbox, прежде чем он будет нацелен.

.container {
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: filter .3s linear;
}

.small {
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: 0.6s ease;
  filter: brightness(95%);
}

.small:hover {
  transform: scale(1.03);
  transition: 0.15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.825);
}
.lightbox:target {
  display: flex;
}
.lightbox:target ~ .container {
  transition: filter 1s linear;
  filter: blur(5px);
}

a div {
  position: relative;
  margin: auto auto;
  text-align: center;
}

<a href="#_" class="lightbox" id="img1">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 12 -</h6>
    <h4>This traditional extension ? in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img2">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 11 -</h6>
    <h4>This contemporary dormer extension ? in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img3">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 10 -</h6>
    <h4>This contemporary extension ? in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img4">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Garden Room | Huddersfield _ December 2018</h3>
    <h6>- 9 -</h6>
    <h4>This contemporary garden room ? in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against
      the wall.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img5">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Extension | Leeds _ November 2018</h3>
    <h6>- 8 -</h6>
    <h4>This contemporary extension ? in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
  </div>
</a>


<div class="container">
  <a href="#img1"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
  </a>
  <a href="#img2"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>
  <a href="#img3"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
  </a>
  <a href="#img4"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>
  <a href="#img5"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>


</div>

Резервное копирование

Это не то, чего хотел спрашивающий. Вам просто нужно ограничить фильтр размытия изображением.Поэтому вместо

.lightbox {
  /* ... */
  filter: blur(5px);
}

сделайте это

.lightbox img {
  /* ... */
  filter: blur(5px);
}

.container
{
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.small
{
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: .6s ease;
  filter: brightness(95%);
 }
.small:hover
{
  transform: scale(1.03);
  transition: .15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}
.lightbox
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.825);
}
.lightbox img {
  filter: blur(5px);
}
a div
{
 position: relative;
 margin: auto auto;
 text-align: center;
}

.lightbox:target
{
display: flex;
}

<div class="container">
 <a href="#img1"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
</a>
 <a href="#img2"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
 <a href="#img3"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
</a>
  <a href="#img4"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img5"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img6"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img7"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img8"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img9"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img10"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img11"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img12"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>

  <a href="#_" class="lightbox" id="img1">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 12 -</h6>
      <h4>This traditional extension ? in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img2">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 11 -</h6>
      <h4>This contemporary dormer extension ? in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img3">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 10 -</h6>
      <h4>This contemporary extension ? in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img4">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Huddersfield _ December 2018</h3>
      <h6>- 9 -</h6>
      <h4>This contemporary garden room ? in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against the wall.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img5">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Leeds _ November 2018</h3>
      <h6>- 8 -</h6>
      <h4>This contemporary extension ? in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img6">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ August 2018</h3>
      <h6>- 7 -</h6>
      <h4>This traditional garden room ? in Barnsley was designed to replace existing outhouses and to make use of the sunlight to the rear of the garden. This project also involved the redesign of the parking to the rear of the property.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img7">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ July 2018</h3>
      <h6>- 6 -</h6>
      <h4>This contemporary extension ? in Barnsley has a cedar cladding section over a corner of glazing to allow for views of the garden, it also has a raised patio to allow for level access to a seating area.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img8">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ June 2018</h3>
      <h6>- 5 -</h6>
      <h4>This traditional extension ? in Barnsley is on the ground floor and extends the kitchen to create a open plan layout and also emulates the traditional style of the house.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img9">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Visual | Huddersfield _ May 2018</h3>
      <h6>- 4 -</h6>
      <h4>This visual ?‍? was created to depict the rear of a traditional new build home, that has a contemporary extension in Huddersfield. The house was designed by Northern Design Partnership in Holmfirth.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img10">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Holmfirth _ March 2018</h3>
      <h6>- 3 -</h6>
      <h4>This contemporary garden room ? in Holmfirth was designed to provide a space for guests to stay in while also having a small shower room behind the stone cladding.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img11">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Porch | Huddersfield _ June 2017</h3>
      <h6>- 2 -</h6>
      <h4>This traditional stone clad porch ? in Huddersfield was designed and had building drawings produced by us. It emulates the traditional style of the property and uses the same materials.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img12">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ July 2016</h3>
      <h6>- 1 -</h6>
      <h4>These visuals depict the interior of a contemporary garden room ? in Barnsley and it provides a space for guests to stay in while also doubling up as a painting room.</h4>
    </div>
 
  </a>
  </div>