CSS按鈕在縮略圖

我真的不知道怎麼用這個進行。我曾嘗試做過這種事情，但沒有取得任何成功，所以我想我會先跳到這裏來尋求智慧的民間智慧。CSS按鈕在縮略圖

基本上我有一系列的80x80縮略圖在我的頁面上平鋪，我想在拇指的右下角有一個小加號按鈕（有一個懸停，所以你可以看到它是一個按鈕），執行Javascript功能。基本上，加號按鈕會將縮略圖添加到頁面的另一個區域。

反正能有人給我如何做到這一個簡單的例子？不僅按鈕可點擊，而且如果縮略圖的正常圖像部分被點擊，我希望它可以進入該拇指。我有縮略圖部分的工作，我只需要弄清楚如何覆蓋按鈕，並使其成爲一個單獨的可點擊元素的實際縮略圖。我爲此做了一個加號按鈕圖像和一個懸停加按鈕圖像。

基本上我只是在尋找一個起點，我試着在谷歌的例子，我無法得到任何工作，他們都不是真正適合我想要做的事。不幸的是，CSS不是我的強項之一。

感謝您的幫助大家，大加讚賞。

來源

2012-05-19 b0xxed1n

你需要修改你的問題，並張貼相關的代碼你目前的問題！此外，總是很好地告訴你到目前爲止你嘗試過什麼！ – Zuul

你的問題是非常相似的回答http://stackoverflow.com/questions/403478/css-how-to-overlay-images –

如果我理解正確的，試試這個...

.img_container {position: relative; width: 80px; height: 80px;} 

.img_container button {display: none; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;} 
.img_container:hover {background: rgba(0,0,0,.4);} 
.img_container:hover button {display: inline-block;)

你的HTML

<div class="img_container"> 
    <img src="pic.png"> 
    <button>+</button> 
</div>

希望這有助於:)

來源

2012-05-20 08:33:25 Josh

CSS按鈕在縮略圖

回答

相關問題