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

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

  
Link