Search code examples
htmlcsshoverwebkitblur

Blur/Unblur 2 Different Backgrounds on Hover


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>


Solution

  • 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/