Pure CSS lightbox с размытым темным фоном

Question

Я не могу на всю жизнь понять, как размыть темный фон, не воздействуя на мой лайтбоксы. Любая помощь будет оценена по мере того, как я все еще пытаюсь узнать, как использовать функцию: target. Я планирую иметь несколько четких изображений, поэтому, когда я нажимаю каждый, этот эффект лайтбокса будет работать с чистым css3. Кроме того, любая дополнительная помощь, чтобы сделать этот браузер более дружественным без javascript, было бы здорово !! На данный момент код работает, чтобы просто создать лайтбокс с изображением на темном фоне.

HTML

<div class="page"> 
<a href="#image1"><img src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" alt="" style="width: 300px; height: auto; " /></a> 
</div> 
<a href="#" id="image1" class="pressbox"><img src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" style="width: 70%; max-height:90%; " alt=""></a> 

CSS

.page{ 
width: auto; 
height: auto; 
padding: 20px; 
} 
.pressbox { 
    width: 0; 
    height: 0; 
    position: fixed; 
    overflow: hidden; 
    left: 0; 
    top: 0; 
    z-index: 9999; 
    text-align: center; 
    background: rgba(0,0,0,0.7); 
} 
.pressbox img { 
    opacity: 0; 
    padding: 10px; 
    background: #ffffff; 
    margin-top: 100px; 
    -webkit-box-shadow: 0px 0px 15px #444; 
    -moz-box-shadow: 0px 0px 15px #444; 
    box-shadow: 0px 0px 15px #444; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    transition: opacity .25s ease-in-out; 
} 
.pressbox:target { 
    width: auto; 
    height: auto; 
    bottom: 0; 
    right: 0; 
} 
.pressbox:target img { 
    opacity: 1; 
} 
.page:target { 
-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 
} 

Answer 1

То, что вы пытаетесь достичь в настоящее время не представляется возможным только с помощью CSS, но оно приходит.

https://webkit.org/blog/3632/introducing-backdrop-filters/

Answer 2

сделать это ва CSS только не такая хорошая идея, но давайте представим, что это.

Чтобы открыть или закрыть изображение и вызвать другой стиль на разных страницах страницы, вам помогут элементы формы, такие как радио (или флажок).

inputs вперёд в HTML.

в любом месте страницы превью, завернутый в label s, связанный с input с помощью атрибута for.

Somehwere next (after) your input s в коде #overlay, держащий большие изображения, сами обернутые в label. #overlay не стоит, конечно, в обертке.

Теперь, когда такая структура есть, вы можете использовать селектор :checked ~ для применения стилей, где вы хотите удалить DOM/document.

DEMO, но я бы не рекомендовал использовать такую ​​структуру которым есть смысл меньше и сбивает с толку, как только стиль не загружен, даже если это будет интересно играть с CSS;)

:checked~.wrapper { 
 
    filter: blur(5px); 
 
} 
 

 
#overlay label { 
 
    display: none; 
 
} 
 

 
:checked ~ #overlay { 
 
    position: fixed; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 

 
#a1:checked ~ #overlay label.a1 
 
/* add each other selector here a2, a3, .... */{ 
 
    display: block; 
 
    margin: auto; 
 
    height: 80%; 
 
    width: 80%; 
 
    display: flex; 
 
} 
 

 
label img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    margin: auto; 
 
    vertical-align:middle; 
 
} 
 
.img { 
 
    font-size:2em; 
 
    color:red; 
 
    } 
 
.img img { 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
input[id^=a] { 
 
    position: absolute; 
 
    right: 120%; 
 
}

<input id="a1" type="radio" name="test" /> 
 
<!-- as any needed --> 
 

 

 
<div id="overlay"> 
 
    <label for="a" class="a1"> 
 
    <img src="http://lorempixel.com/500/500/nature/1" /> 
 
    </label> 
 
    <!-- as any needed --> 
 
    <input id="a" type="radio" name="test" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <h1> test</h1> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
    <div class="img"> 
 
    My CSS lightbox image => 
 
    <label for="a1"> 
 
     <img src="http://lorempixel.com/50/50/nature/1" /> 
 
    </label> 
 
    </div> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
</div>