鼠標懸停的圖像模糊圖像和顯示文字

我想有一個4頁的不同背景圖像的頁面。在鼠標懸停時，它應該模糊圖像並顯示文本。點擊它應該重定向到不同的HTML文件。請幫忙！鼠標懸停的圖像模糊圖像和顯示文字

<html> 
<head> 
<script src="jquery-1.11.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("#div1").hover(function(){ 
$(this).css("opacity", "0.5"); 
}); 
}); 
</script> 
<title>Background Image in Quadrants</title> 
<style type="text/css"> 
.tl { position: absolute; top: 0; left: 0; right: 50%; bottom: 50%; 
     background: url(pic1.jpg) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 10px 10px 0; } 
.t2 { position: absolute; top: 0; left: 50%; right: 0; bottom: 50%; 
     background: url(pic1.jpg) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 0 10px 0; } 
.t3 { position: absolute; top: 50%; left: 0; right: 50%; bottom: 0; 
     background: url(pic1.jpg) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 10px 0 0; } 
.t4 { position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; 
     background: url(pic1.jpg) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 0 10px 0; } 
</style> 
</head> 
<body> 

<div id="div1" class="tl"></div> 
<div id="div2" class="t2"></div> 
<div id="div3" class="t3"></div> 
<div id="div4" class="t4"></div> 
</body> 
</html>

來源

2015-10-09 anjali

你有沒有看着https://css-tricks.com/almanac/properties/f/filter/ – Joekomino

試試這個http://stackoverflow.com/questions/29707562/how-to-make-background-image-blur-on-link-hover –

試試這個。 http://jsfiddle.net/zdtmnpk2/1/

.tl { position: absolute; top: 0; left: 0; right: 50%; bottom: 50%; 
 
     background: url(http://assets.servedby-buysellads.com/p/manage/asset/id/15119) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 10px 10px 0; } 
 
.t2 { position: absolute; top: 0; left: 50%; right: 0; bottom: 50%; 
 
     background: url(http://assets.servedby-buysellads.com/p/manage/asset/id/15119) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 0 10px 0; } 
 
.t3 { position: absolute; top: 50%; left: 0; right: 50%; bottom: 0; 
 
     background: url(http://assets.servedby-buysellads.com/p/manage/asset/id/15119) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 10px 0 0; } 
 
.t4 { position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; 
 
     background: url(http://assets.servedby-buysellads.com/p/manage/asset/id/15119) no-repeat;background-size: 100% 100%;  border:solid #000; border-width: 0 0 10px 0; } 
 

 

 
.tl:hover, .t2:hover, .t3:hover, .t4:hover{ -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
} 
 

 
span{ 
 
    color: #fff; 
 
    position: absolute; 
 
    display:none; 
 
    z-index: 5; 
 
    
 
} 
 
.text:hover > span { display:block; }

<div class="text"> 
 
    <div id="div1" class="tl"></div> 
 
    <span>Some text</span> 
 
</div> 
 
<div class="text"> 
 
    <div id="div2" class="t2"></div> 
 
</div> 
 
<div class="text"> 
 
    <div id="div3" class="t3"></div> 
 
</div> 
 
<div class="text"> 
 
    <div id="div4" class="t4"></div> 
 
</div>

來源

2015-10-09 20:08:40 user1012181

我相信'-ms-'和'-o-'規則不存在......'-moz-'也有可能。 – Shikkediel

鼠標懸停的圖像模糊圖像和顯示文字

回答

相關問題