Blur/Unblur 2 Different Backgrounds on Hover

Question

On my code I have divided the browser width for 2 divs. I was planning on applying a hyperlink to each div, like 2 big buttons, but before doing that, I wanted to apply some webkit-filter to them, so they get more intuitive as a button.

How can I apply hyperlink to these divs and apply blur/unblur on hover without blurrying the text?

Here are the codes I'm using so far: (images only for test purposes :P )

#containergaleria {
    display: table;
    width: 100%;
}

#containergaleria div {
    display: table-cell;
    width: 50%;
}

#imagens {background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
         background-position: right center; 
}

#videos {background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
        background-position: left center; 
}


p.centertext {
    margin-top: 25%;
    margin-bottom: 25%
}

body {
    overflow:hidden;
}

<div id="containergaleria">
  
    <div id="imagens"><p class="centertext" align="right"><a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">IMAGENS</a>&nbsp;&nbsp;</p></div>
  
    <div id="videos"><p align="left">&nbsp;&nbsp;<a class="button-medium pull-center" href="http://stackoverflow.com/" target="_blank">VÍDEOS</a></p></div>
  
</div>

score 1 · Accepted Answer · answered Jan 19 '16 at 06:46

you can do it by using background on :before element on css.

#imagens:before,
#videos:before {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
transition: all .5s ease;
-webkit-transition: all .5s ease;
filter: blur(0);
-webkit-filter: blur(0);
}

#imagens:hover:before,
#videos:hover:before {
filter: blur(2px);
-webkit-filter: blur(2px);
}

#imagens:before {
background-image: url("http://gamerealla.ru/wp-content/uploads/2014/09/1392986721_r1.jpg");
background-position: right center;
}

#videos:before {
background-image: url("http://gamehall.uol.com.br/v10/wp-content/uploads/2015/01/Black-Desert-Online-Beast-Master-Woman-02.jpg");
background-position: left center;
}

check the following fiddle: https://jsfiddle.net/k486zf3w/

Wow, really useful feature! One said it may be taxing on weaker devices, so I'll be testing it on my sister's notebook! :) Thanks for your help! — André Hikaru, Jan 19 '16 at 14:09

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Check out this post. You can't apply a blur filter to a background image, only <img/> tags. However, using an absolutely positioned <img/> z-indexed below your content, you can achieve the same effect.

edited May 23 '17 at 12:15

Community

1
1

answered Jan 19 '16 at 02:34

nikarc

138
3
11

I would also like to point out that blurring images can be especially taxing on weaker devices, such as phones, or lower end laptops. Be sure to test on some of these devices, as they may have a significantly worsened experience for the sake of aesthetic. You can increase the performance by using a lower resolution image, lowering the blur radius, or serving up a pre-blurred image as well. – charrondev Jan 19 '16 at 05:22

Blur/Unblur 2 Different Backgrounds on Hover

2 Answers2