+ 1

Blur Hover Effect on Web Images

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?

17th Dec 2018, 5:38 AM
Tahiro Ab
Tahiro Ab - avatar
10 Answers
+ 1
You need javascript
17th Dec 2018, 5:39 AM
Gordon
Gordon - avatar
+ 1
Can you post your code here?
17th Dec 2018, 5:44 AM
Gordon
Gordon - avatar
+ 1
Can you put in code playground?
17th Dec 2018, 5:56 AM
Gordon
Gordon - avatar
+ 1
Window.onload Document.getelementsbytagname img Run for loop
17th Dec 2018, 5:57 AM
Gordon
Gordon - avatar
+ 1
17th Dec 2018, 7:33 AM
CalviŐ˛
CalviŐ˛ - avatar
+ 1
CalviŐ˛ wow, magic O_o
17th Dec 2018, 8:59 AM
Gordon
Gordon - avatar
0
Ok... can u help me with the code?
17th Dec 2018, 5:40 AM
Tahiro Ab
Tahiro Ab - avatar
0
<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); }
17th Dec 2018, 5:49 AM
Tahiro Ab
Tahiro Ab - avatar
0
<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); }
17th Dec 2018, 5:50 AM
Tahiro Ab
Tahiro Ab - avatar
0
If it can't be done using CSS can u tell me how it's done using JavaScript.
17th Dec 2018, 5:50 AM
Tahiro Ab
Tahiro Ab - avatar