How to make background image blur on link hover?

问题:

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 with classes and id's here...

#pic {
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  /*blur using this function*/
  filter: blur(0);
  -webkit-filter: blur(0);
  -moz-filter: blur(0);
  -o-filter: blur(0);
  -ms-filter: blur(0);
}

.banner_link {
  font-family: 'Raleway';
  letter-spacing: 0.2em;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
  padding-top: 45px;
  text-transform: uppercase;
}

.banner_link a:after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 90px;
  background: #ffffff;
  transition: width .2s ease, background-color .5s ease;
}

.banner_link a:hover:after {
  width: 0px;
  background: transparent;
}

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

<div id="pic" class="banner">
  <div class="banner_link"><a>Link</a>
  </div>
</div>

回答1:

This issue is that you are attempting to traverse up the document tree with CSS. There is no parent selector in CSS, therefore you can only rely on JS to toggle the blur effect when the inner <a> element is hovered on.

This can be easily achieved using native JS, but I've chosen to use jQuery because of the relative ease of use.

The trick is quite simple: to absolutely position a blurred version of the background image, nested in a pseudo-element, say ::before, with its opacity set to zero. When the cursor is over the inner <a> element, toggle a class, say .blur, which sets the pseudo-element's opacity to 1.

The reason why we can't use JS to set the CSS properties of the pseudo-element is because it is not accessible to JS.

$(function() {
  $('.banner_link a').hover(function() {
    $('#pic').addClass('blur');
  }, function() {
    $('#pic').removeClass('blur');
  });
});

#pic {
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  position: relative;
  overflow: hidden;
}
#pic::before {
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
#pic.blur::before {
  opacity: 1;
}
.banner_link {
  font-family: 'Raleway';
  letter-spacing: 0.2em;
  font-size: 13px;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
  padding-top: 45px;
  position: relative;
  text-transform: uppercase;
}

.banner_link a::after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 90px;
  background: #ffffff;
  transition: width .2s ease, background-color .5s ease;
}

.banner_link a:hover:after {
  width: 0px;
  background: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic" class="banner">
  <div class="banner_link"><a>Link</a>
  </div>
</div>

回答2:

#pic a:hover  {  
    background: url(<-- insert blurred image here -->);
}` 

This is the easiest way to create the effect you are looking for. As I'm sure you know, the issue is one of scope. You cannot (to my knowledge) set the background of a parent element from a child element without a JS workaround.

回答3:

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