Wie blurr alle Bilder mit Ausnahme des aktuellen Hover über CSS

Question

Gibt es eine reine CSS-Methode, um alle Bilder mit Ausnahme der schwebenden zu verwischen? Mein aktueller Code wird im folgenden Link angezeigt. Ich habe einen Wrap, um den Bereich zu verwischen, aber ich kann einfach nicht das Bild überfahren, um nicht zu verwischen!

Danke!

Grundkonzept:

.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); 

} 

Voll Code bei

https://jsfiddle.net/0q00jorc/2/ gefunden * edit

Im Grunde war ich versucht, alle Bilder mit Ausnahme der genau ein bis blurr ich immer und nicht schwebte verwischen alles, wenn ich nicht auf den Bildern bin. Der Code aus der Antwort unten tat genau das, außer dass er alle Bilder verwischte, wenn ich über dem Wrap schwebte, der Leerzeichen zwischen Bildern enthielt. Ich möchte nicht blurren, wenn ich nicht selbst auf den Bildern bin.

Answer 1

Setzen Sie den Unschärfe-Effekt auf die Bilder, und weisen Sie dann einen Mauszeiger auf, der die Unschärfe aufhebt.

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); 
}