Html 层叠图像下的淡入文本
我试图在不改变位置的情况下,让文本显示在这4幅图片下,并使这些图片可以点击(超链接) 此时图像处于我想要的位置,但当我将鼠标悬停在图像上方时,图像会重新定位,使其余图像位于第一个图像下方,然后文本显示在图像的右侧。我做错了什么 我还希望在这些图像下面有一个文本体 这是CSS文件(fadeintext.CSS) HTML页面:Html 层叠图像下的淡入文本,html,css,fadein,Html,Css,Fadein,我试图在不改变位置的情况下,让文本显示在这4幅图片下,并使这些图片可以点击(超链接) 此时图像处于我想要的位置,但当我将鼠标悬停在图像上方时,图像会重新定位,使其余图像位于第一个图像下方,然后文本显示在图像的右侧。我做错了什么 我还希望在这些图像下面有一个文本体 这是CSS文件(fadeintext.CSS) HTML页面: <html><head> <head> <meta charset="utf-8"> <meta
<html><head>
<head>
<meta charset="utf-8">
<meta name="description" content="description">
<title>REDACTED</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>
编辑
Instagram
推特
谷歌+
蒸汽
这是页面和CSS样式表
如果有人能告诉我该做什么,我将不胜感激。怎么样
HTML:
您可能需要更改HTML结构,并将每个图像和相关文本包装在一个元素中 我使用了figure/figcaption结构,但它很容易适应
这很好,但我仍在尝试获取它,以便每个图像都有自己的悬停文本,因此,例如,如果您将鼠标悬停在第一个图像上,它将显示与第一个图像关联的文本。太棒了!它现在运行得很好,但我似乎无法在这些图像下面获取文本。它只出现在最后一张图像(best/steam.png)的最右侧。你有什么建议吗?不完全有。我很抱歉没有具体说明,但是我希望文本在每个图像下面的列中。这是一个想法,但是文本应该留在那里,而不需要悬停来阅读列中的文本。当然,在图像和列之间为悬停文本留一个空格。
<html><head>
<head>
<meta charset="utf-8">
<meta name="description" content="description">
<title>REDACTED</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>
<div id="ex3">
<div>
<img src="http://www.example.com/best/instagram.png" />
<p>Instagram</p>
</div>
<div>
<img src="http://www.example.com/best/twitter.png"/>
<p>Twitter</p>
</div>
<div>
<img src="http://www.example.com/best/gplus.png"/>
<p>Google+</p>
</div>
<div>
<img src="http://www.example.com/best/steam.png" />
<p>Steam</p>
</div>
</div>
#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;
}