在鼠標懸停和圖像變暗時在圖片上插入按鈕

-5

當鼠標懸停在圖層上時，我希望圖像變暗一點（Overlay？）。然後，當鼠標懸停時，圖片中的按鈕應該出現，如果鼠標懸停在一個按鈕上，它應該變成紅色（如圖片），並且圖像描述文本應該出現在按鈕下方（如圖片），然後if一個按鈕被點擊它應該帶我們到一個新的URL（說，如果按鈕被點擊，它將我們帶到www.google.com），任何人都可以提供任何代碼？我不知道該怎麼做。在鼠標懸停和圖像變暗時在圖片上插入按鈕

來源

2016-03-04 Pretty_Girl

如果你不知道該怎麼做，你的第一個問題是你不懂HTML，CSS或JavaScript。爲了解決這個問題，你首先需要學習。在互聯網上有很多教程，使用您選擇的搜索引擎找到一個並開始。我們不是一個免費的編碼服務，我們只是在這裏幫助您解決您的編程問題（一旦您已經付出努力並且能夠清楚地傳達您在實施自己的解決方案時面臨的問題）。順便說一句，你已經成爲這個網站的成員8個月，問了14個問題，仍然不知道網站的規則？ –

歡迎來到SO。請訪問[幫助]，看看有什麼和如何問。提示：不是elance.com – mplungjan

從這些（http://tympanus.net/Tutorials/CaptionHoverEffects）學習並自己嘗試，如果仍然卡住粘貼代碼，我們將幫助您使用它 –

我覺得這是你want.try這算什麼。我只關心你的主要觀點。這將對你有用。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>Test</title> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
</head> 
 
<style type="text/css"> 
 
body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.contain{ 
 
    width: 1000px; 
 
    height: 667px; 
 
    border: 2px solid black; 
 
    margin: 100px; 
 
    margin-top: 10px; 
 
    background-image: url(https://dancingaspen.files.wordpress.com/2015/09/coffee-shop-mug.jpg); 
 
} 
 

 
div.mask{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    position:relative; 
 
    opacity: 0; 
 

 
} 
 

 
.zoom{ 
 
    width: 150px; 
 
    height: 50px; 
 
    color: white; 
 
    font-size: 35px; 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 300px; 
 
    border: 2px solid white; 
 
    border-radius: 10px; 
 
    display: none; 
 
    text-align: center; 
 
    font-size: monospace; 
 
    padding-top: 15px; 
 
    text-decoration: none; 
 
} 
 

 
.description{ 
 
    
 
    position: absolute; 
 
    width: 70%; 
 
    height: 30%; 
 
    top:410px; 
 
    left: 12%; 
 
    font-size: 35px; 
 
    color: white; 
 
    font-family: zapfino; 
 
    text-align: center; 
 
    display: none; 
 
} 
 

 

 
</style> 
 
<body> 
 

 
<div class="contain"> 
 
<div class="mask"></div> 
 
    <a href="#" target="_blank" class="zoom">ZOOM</a> 
 
    <div class="description">your description here</div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
    $(".contain").mouseenter(function(){ 
 
     $(".mask").animate({opacity:0.5},1000); 
 
     $(".zoom").fadeIn(1500); 
 
     $(".description").fadeIn(1500); 
 
    }); 
 

 
    $(".contain").mouseleave(function(){ 
 
     $(".mask").animate({opacity:0},1000); 
 
     $(".zoom").fadeOut(); 
 
     $(".description").fadeOut(); 
 
    }); 
 
    }); 
 
</script> 
 

 
</body> 
 
</html>

只需複製，粘貼和運行。

來源

2016-03-04 16:59:13

使用'懸停'設置可以使用直線css完成變暗圖像。選擇你的照片（或最好是包含圖像的div）並設置div：將光標懸停在較低的不透明度上，如不透明度：0.5;

如果你想使圖像變暗，而無需一個黑暗的背景，你可以設置圖像作爲div的背景 enter code here enter code here

enter code here .parent {背景：「圖像/ image.jpg的」;} enter code here .child {background-color：black; opacity：0;} enter code here .child：hover {opacity：0.7;}

來源

2016-03-04 17:41:55 Cornucopia

在鼠標懸停和圖像變暗時在圖片上插入按鈕

回答

相關問題