How to make background image blur on link hover?

Question

I\'d like to make my background image blur for let\'s say 5px when you hover the link with a mouse cursor. Is there any simple way to make this happen? I got a bit entangled wit

Answer 1

Implementation in jQuery

This is the working one. When you hover the link it will make the image blur via jQuery.

See the jsfiddle link below

http://jsfiddle.net/ahmukovf/

Code

$( ".banner_link" ).hover(function() {
  $('#pic').css("-webkit-filter", "blur(3px)", "filter", "blur(3px)");
});
$( ".banner_link" ).mouseout(function() {
  $('#pic').css("-webkit-filter", "blur(0px)", "filter", "blur(0px)");
});

Implementation in CSS

See this working jsfiddle if you want to achieve it via CSS.

http://jsfiddle.net/9jqax4jb/

Code

.banner_link a:hover + #pic {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}