Blur Hover Effect on Web Images

Question

By using,
.blur img:hover{
-webkit-filter: blur(5px);
}
I can blur my image using CSS when hovering over the image. But is there a way to blur all other images except the one i am hovering over now?

Answer 1

You need javascript

Answer 2

Can you post your code here?

Answer 3

Can you put in code playground?

Answer 4

Window.onload
Document.getelementsbytagname img
Run for loop

Answer 5

Add :not to the css selector

https://code.sololearn.com/WnkIa2HR9tc6/?ref=app

Answer 6

Calviղ wow, magic O_o

Answer 7

Ok... can u help me with the code?

Answer 8

<div class="blur">
<img src="source1.jpg">
<img src="source2.jpg">
<img src="source3.jpg">
<img src="source4.jpg">
</div>

CSS

.blur img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

Answer 9

<div class="blur">
<img src="source1.jpg">
<img src="source2.jpg">
<img src="source3.jpg">
<img src="source4.jpg">
</div>

CSS

.blur img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.blur img:hover {
-webkit-filter: blur(5px);
}

Answer 10

If it can't be done using CSS can u tell me how it's done using JavaScript.