模糊/ Unblur 2悬停的不同背景

时间:2016-01-19 02:27:35

标签: html css hover webkit blur

在我的代码中,我将浏览器宽度除以2个div。我计划在每个div上应用一个超链接,比如2个大按钮,但在此之前,我想对它们应用一些webkit-filter,因此它们作为按钮变得更加直观。

如何在这些div上应用超链接并在悬停时应用blur / unblur而不模糊文字?

以下是我目前使用的代码: (图像仅用于测试目的: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>

2 个答案:

答案 0 :(得分:1)

你可以使用背景:在css上的元素之前。

AppTestConfigurer

检查以下小提琴: https://jsfiddle.net/k486zf3w/

答案 1 :(得分:0)

结帐this post。您无法将模糊滤镜应用于背景图片,只能应用<img/>个标签。但是,在您的内容下面使用绝对定位的<img/> z-index,您可以达到同样的效果。