CSS圖像縮略圖翻轉顯示文字

rollover

STEP標誌是一個縮略圖，以及RV標誌旁邊是一樣的，只不過它是在這一點上，視圖項目和藍色透視背景出現。

我試了幾件事情：

製作的IMG的<a>標籤的背景和放置<p>標籤在<a>標籤和使用display: none;，然後:hover變爲display: block;

這種佈局響應這樣造成的問題，我的代碼是這樣的：

HTML：

<a class="work-thumb" href="#"><p class="work-thumb-rollover">view project</p></a>

CSS：

a.work-thumb { 
    width: 20%; 
    padding-top: 50%; 
    background-image: url(images/work1.jpg); 
    background-size: cover; 
    -moz-background-size: cover; /* Firefox 3.6 */ 
    background-position: center; 
} 
    /* This code works, the image as the background is responsive */ 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
} 

    /* This doesn't seem to work, the width 100% doesn't take the width of it's parent and on rollover no color appears? */

我使用HTML和絕對定位img標籤也試過：

HTML：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover">view project</p></a>

CSS：

.work-thumb { 
    position: relative; 
} 

.work-thumb img { 
    width: 33%; 
    height: auto; 
    float: left; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    z-index: 1; 
} 

p.work-thumb-rollover { 
    display: none; 
} 

p.work-thumb-rollover:hover { 
    position: absolute; 
    display: block; 
    text-align: centre; 
    width: 100%; 
    background: rgba(54, 25, 25, .5); 
    top: 50%; 
    left: 50%;   
}

這一個，P標籤寬度不會採用那個o如果它是父項，並且將堅持框的右上角（不管我給出的屬性爲top或left屬性）。

我嘗試了類似這樣的事情，我刪除了它們，並回到了原來的一個（只是在沒有CSS的情況下，HTML中的圖像除了響應性在一分鐘之外），但我嘗試過這些變體，只是無法讓他們工作。

任何人都可以照亮這一點，或提供他們可能已經使用或看到的簡單解決方案嗎？

來源

2013-02-26 Jon Kyte

'工作縮略圖'的圖像不是我的工作，只是爲了記錄。我只是屏幕從一個網站拍攝它。 – 2013-02-26 17:46:51

你可以這樣做只是用CSS/3和HTML：

Heres an example I made for you

你不得不更換

background-color

與

background-image

得到結果你後。

編輯：這裏有一個更新的jsfiddleLink >>

來源

2013-02-26 17:53:22 chriz

感謝您的關注 - 除了我仍然能夠看到「懸停」上的原始背景圖像外，這幾乎是我所追求的。你知道我能做到嗎？ – 2013-02-26 18:05:53

當然！只需將圖像放在div中，並將其設置爲居中即可http://jsfiddle.net/7Db9n/3/ – chriz 2013-02-26 18:08:36

你我的朋友，真棒。非常感謝！我欠你一杯啤酒。 – 2013-02-26 18:30:50

您可以將錨標記轉換成一個div 特定的寬度和高度和：懸停可以更改背景圖片。在div必須樣式

顯示：inline-block的

來源

2013-02-26 17:56:00

我不能使用特定的寬度和高度，因爲設計是流暢的，寬度都是使用百分比，任何其他想法計算？ – 2013-02-26 18:08:00

如果我理解你的問題正確的話，你希望顯示的文本以及改變懸停背景圖像。爲什麼不使用一個小jQuery來完成它：

<a class="work-thumb" href="#"><img src="images/work1.jpg" alt="work"><p class="work-thumb-rollover"></p></a> 

$('.work-thumb').hover(function() { 

$('.work-thumb-rollover').text('view project'); 
$('.work-thumb > img').attr('src', 'images/work2.jpg'); 

});

來源

2013-02-26 18:02:38 Alex

幾乎，我希望背景圖像保持原樣，因此在我的照片中，RV只是圖像，然後在懸停時，「VIEW PROJECT」和「放大鏡」幾乎疊加在背景圖像上，並且當你不再徘徊時消失。有任何想法嗎？ – 2013-02-26 18:07:23

CSS圖像縮略圖翻轉顯示文字

回答

相關問題