css経由で現在のホバーを除くすべての画像をぼかす方法

Question

ホバリングされている画像以外のすべての画像をぼかす純粋なCSSメソッドがありますか？私の現在のコードは、次のリンクに示されています。私は領域をぼかすためにラップを持っていますが、ちょうどぼかしではない上にぶらさがっているイメージを得ることができません！

ありがとうございます！

基本的な考え方：

https://jsfiddle.net/0q00jorc/2/ *編集基本的に

で発見

完全なコードは、私がオーバーしていないぼやけホバリングされた正確な1以外のすべての画像をblurrしようとしていた

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

} 

私がイメージ上にないなら何でも。下の答えのコードは、イメージの間に空白を含む折り返しの上にマウスを置いた場合、すべてのイメージがぼやけている点を除いて、それだけでした。私は自分自身のイメージ上にない限り、私はぼかしをしたくありません。

Answer 1

画像にぼかし効果を入れてから、ぼかしをオーバーライドするimgホバーがあります。

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