Как размыть все изображения, кроме текущего наведения с помощью css

Question

Есть ли чистый метод css, чтобы размыть все изображения, кроме тех, на которых парит? Мой текущий код показан в следующей ссылке. У меня есть обертка, чтобы размыть область, но просто не могу заставить изображение зависнуть, чтобы не размываться!

Спасибо!

Основная концепция:

.wrap:hover 
    { 
    -webkit-filter: blur(13px); 
    -moz-filter: blur(13px); 
    -o-filter: blur(13px); 
    -ms-filter: blur(13px); 
    filter: blur(13px); 

} 

img:hover 
{ 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-o-filter: blur(0px); 
-ms-filter: blur(0px); 
filter: blur(0px); 

} 

Полный код найден на

https://jsfiddle.net/0q00jorc/2/ * редактировать

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

Answer 1

Нанесите эффект размытия на изображения, затем введите img hover, который отменяет размытие.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #EEE; 
 
    font: 10px/13px 'Lucida Sans',sans-serif; 
 
} 
 
.wrap { 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 
.box { 
 
    float: left; 
 
    position: relative; 
 
    width: 20%; 
 
    padding-bottom: 20%; 
 
} 
 
.boxInner { 
 
    position: absolute; 
 
    left: 10px; 
 
    right: 10px; 
 
    top: 10px; 
 
    bottom: 10px; 
 
    overflow: hidden; 
 
} 
 
.boxInner img { 
 
    width: 100%; 
 
    outline: 15px solid rgba(0,0,0,.5); 
 
    outline-offset: -15px; 
 
} 
 
.boxInner .titleBox { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin-bottom: -50px; 
 
    background: #000; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: #FFF; 
 
    padding: 10px; 
 
    text-align: center; 
 
    -webkit-transition: all 0.3s ease-out; 
 
    -moz-transition: all 0.3s ease-out; 
 
    -o-transition: all 0.3s ease-out; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.wrap:hover img 
 
{ 
 
    -webkit-filter: blur(13px); 
 
    -moz-filter: blur(13px); 
 
    -o-filter: blur(13px); 
 
    -ms-filter: blur(13px); 
 
    filter: blur(13px); 
 
    
 
} 
 

 
.wrap:hover img:hover 
 
{ 
 
    -webkit-filter: blur(0px); 
 
    -moz-filter: blur(0px); 
 
    -o-filter: blur(0px); 
 
    -ms-filter: blur(0px); 
 
    filter: blur(0px); 
 
} 
 
} 
 

 
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
 
    margin-bottom: 0; 
 
} 
 
@media only screen and (max-width : 480px) { 
 
    /* Smartphone view: 1 tile */ 
 
    .box { 
 
     width: 100%; 
 
     padding-bottom: 100%; 
 
    } 
 
} 
 
@media only screen and (max-width : 650px) and (min-width : 481px) { 
 
    /* Tablet view: 2 tiles */ 
 
    .box { 
 
     width: 50%; 
 
     padding-bottom: 50%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1050px) and (min-width : 651px) { 
 
    /* Small desktop/ipad view: 3 tiles */ 
 
    .box { 
 
     width: 33.3%; 
 
     padding-bottom: 33.3%; 
 
    } 
 
} 
 
@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
 
    /* Medium desktop: 4 tiles */ 
 
    .box { 
 
     width: 25%; 
 
     padding-bottom: 25%; 
 
    } 
 
}

<div class="wrap"> 
 
    
 
    <!-- Define all of the tiles: --> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" /> 
 
     <div class="titleBox">Butterfly</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" /> 
 
     <div class="titleBox">An old greenhouse</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" /> 
 
     <div class="titleBox">Purple wildflowers</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" /> 
 
     <div class="titleBox">A birdfeeder</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" /> 
 
     <div class="titleBox">Crocus close-up</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" /> 
 
     <div class="titleBox">The garden shop</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" /> 
 
     <div class="titleBox">Spring daffodils</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" /> 
 
     <div class="titleBox">Iris along the path</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" /> 
 
     <div class="titleBox">The garden blueprint</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" /> 
 
     <div class="titleBox">The patio</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" /> 
 
     <div class="titleBox">Bumble bee collecting nectar</div> 
 
    </div> 
 
    </div> 
 
    <div class="box"> 
 
    <div class="boxInner"> 
 
     <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" /> 
 
     <div class="titleBox">Winding garden path</div> 
 
    </div> 
 
    </div> 
 
    
 
</div>

Answer 2

img { 
-webkit-filter: blur(13px); 
-moz-filter: blur(13px); 
-o-filter: blur(13px); 
-ms-filter: blur(13px); 
filter: blur(13px); 
} 

img:hover { 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-o-filter: blur(0px); 
-ms-filter: blur(0px); 
filter: blur(0px); 
}