在級聯圖像下淡入文字

我試圖在沒有更改位置的情況下讓這些圖像在這4幅圖像下出現，並且還使這些圖像可點擊（超鏈接）。在級聯圖像下淡入文字

目前圖像處於我想要的位置，但是當我將鼠標懸停在它們上方時，它們自己重新定位，以使其餘的位於第一個圖像下方，然後文本顯示在圖片。我究竟做錯了什麼？

我還想要在這些圖像下面包裹一段文字。

這裏的CSS文件（fadeintext.css）

#ex3 
{ width: 1280px; height: 256px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } 
#ex3:hover { line-height: 256px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }

的HTML頁面：

<html><head> 
<head> 
<meta charset="utf-8"> 
<meta name="description" content="description"> 

<title>David Diack</title> 

<link rel="stylesheet" type="text/css" media="screen" href="fadeintext.css"> 

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<style type="text/css"></style></head> 
</head> 
<div id="ex3"> 
     <img src="best/instagram.png"><p>Instagram</p> 
     <img src="best/twitter.png"><p>Twitter</p> 
     <img src="best/gplus.png"><p>Google+</p> 
     <img src="best/steam.png"><p>Steam</p> 
    </div> 
</html>

而這裏的頁面和CSS樣式表一起http://www.diack.co.za/

如果有人能請你告訴我應該做什麼，這將不勝感激。

來源

2013-09-21 Daveyolo

this怎麼樣？

HTML：

<div id="ex3"> 
    <div> 
     <img src="http://www.diack.co.za/best/instagram.png" /> 
     <p>Instagram</p> 
    </div>  
    <div>  
     <img src="http://www.diack.co.za/best/twitter.png"/> 
     <p>Twitter</p> 
    </div>   
    <div>  
     <img src="http://www.diack.co.za/best/gplus.png"/> 
     <p>Google+</p> 
    </div>  
    <div>  
     <img src="http://www.diack.co.za/best/steam.png" /> 
     <p>Steam</p> 
    </div>  
</div>

CSS：

#ex3 { width: 1280px; 
    height: 256px; 
    line-height: 0px; 
    color: transparent; 
    font-size: 50px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
    text-transform: uppercase; 
} 

#ex3 div:hover { 
    line-height: 0px; 
    color: #575858; 
} 

p { 
    text-align: center; 
} 

#ex3 div{ 
    float: left; 
    margin: 0 15px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
} 

#ex3 div:nth-of-type(2){ 
    margin-top: 50px; 
} 

#ex3 div:nth-of-type(3){ 
    margin-top: 100px; 
} 

#ex3 div:nth-of-type(4){ 
    margin-top: 150px; 
}

來源

2013-09-21 17:51:17 chopper

這工作得很好，但我仍然試圖得到它使每個圖像有它自己的懸停文本，因此，例如，如果你將鼠標懸停在第一個圖像，它會顯示相關的文本與第一個圖像。 – Daveyolo

沒問題。看到我更新的答案 – chopper

這很有道理，是否有任何方法可以像放置在www.diack.co.za上那樣定位圖像（在您幫助我之前的原始圖像）？ – Daveyolo

您可能需要改變你的HTML結構和包裝每個圖像和相關文本中的一個元素。

我已經使用了figure/figcaption結構，但它很容易適應。

Codepen Example

來源

2013-09-21 18:07:50

切碎機已非常親切地幫助我，謝謝。看看http://www.diack.co.za並告訴我這是否正常？ – Daveyolo

在級聯圖像下淡入文字

回答

相關問題