HTML/CSS圖片縮略圖翻轉

昨天我在這裏問了一個關於這個解決方案的問題，並且認爲我已經解決了它並且標記了一個正確的答案，但是現在我意識到它並不完全正確。HTML/CSS圖片縮略圖翻轉

我一直在玩弄小提琴，基本上我想這個..

Rollover

左邊將是NON徘徊狀態，然後懸停我想藍色的疊加和文本'查看項目'。

這是我玩的小提琴，我唯一無法展示的就是文字。

<div class="cont"> 

<div class="work-thumb"><img src="http://www.menshealth.co.uk/cm/menshealthuk/images/qQ/mh-face-off-winner-MED-07032011.jpg" /><a class="roll-text">View</a></div>

有幾件事情要注意...的<img>必須響應。所以'視圖項目'也必須是響應式的（不能使用固定的像素寬度）。

任何幫助將大規模讚賞。由於

來源

2013-02-27 Jon Kyte

您需要激活文本徘徊div元素上時，沒有錨本身：

.work-thumb:hover a.roll-text { 
    display: inline-block; 
    position: absolute; 
    top: 20px; 
    left: 10px; 
    text-align: center; 
    color: #fff; 
}

請參閱updated jsFiddle。

來源

2013-02-27 13:01:56 BenM

清潔解決方案，但它不迴應是什麼呢？ – jantimon 2013-02-27 13:06:17

是的。 'top'和'left'屬性是相對於包含元素的。 – BenM 2013-02-27 13:07:19

將「View」替換爲一個句子並調整結果窗口的大小。文字不會換行。 – jantimon 2013-02-27 13:08:50

您也可以使用兄弟選擇器+來顯示文本，因爲它是隱藏的。

Demo

.work-thumb img:hover + .roll-text { 
    display:block; 
}

來源

2013-02-27 13:04:41

不是他想要的 - 查看問題，更具體地說是示例。 – BenM 2013-02-27 13:07:43

HTML/CSS圖片縮略圖翻轉

回答

相關問題