Html CSS图像库
我的图像库在滚动时工作正常,尽管在图像放大到的区域,我希望库中的第一个图像自动出现在那里,此时它只显示一个空白框,直到您将鼠标悬停在图像上Html CSS图像库,html,css,Html,Css,我的图像库在滚动时工作正常,尽管在图像放大到的区域,我希望库中的第一个图像自动出现在那里,此时它只显示一个空白框,直到您将鼠标悬停在图像上 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" hre
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css"/>
<title>Welcome!</title>
</head>
<div id="wrapper">
<body>
<div id="header">
<div id ="logo">
<embed src="Media/Images/logo.svg" type="image/svg+xml" />
</div>
<div id="icons">
<img src="Media/Images/EnvelopeIcon.png" alt="Envelope Icon" height="25" width="30">
<p>M015734a@student.staffs.ac.uk</p>
<div class="clear">
</div>
<img src="Media/Images/PhoneIcon.png" alt="Envelope Icon" height="25" width="30" />
<p> 07904921417</p>
<div class="clear">
</div>
<img src="Media/Images/HouseIcon.png" alt="Envelope Icon" height="25" width="30">
<p>Stafford, UK</p>
<div class="clear">
</div>
<div class="clear">
</div>
</div>
</div>
<nav>
<div id ="NavBar">
<div id="Nav1">
<div id="Triangle1"></div>
<a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Index.html"><h2>About Me</h2></a>
</div>
<div id="Nav2">
<div id="Triangle2"></div>
<a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Education.html"><h2>Education</h2></a>
</div>
<div id="Nav3">
<div id="Triangle3"></div>
<a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Portfolio.html"><h2>Portfolio</h2></a>
</div>
<div id="Nav4">
<div id="Triangle4"></div>
<a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Interests.html"><h2>Interests</h2></a>
</div>
<div id="Nav5">
<div id="Triangle5"></div>
<a href="E:/Program%20Files/Dropbox/Corsair%20Backup/Media%20For%20The%20Web/Assignment%20Part%202/Contact.html"><h2>Contact Me</h2></a>
</div>
</div>
</nav>
<article>
<section id = "content">
<h1>Portfolio Work</h1>
<div class="gallerycontainer">
<a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Claymation1.JPG" width="225px" height="125px" border="0" /><span><img src="Media/Images/Claymation1.JPG" width="750px" height="450px"/><br />Sushi for dinner anyone?</span></a>
<br/>
<a class="thumbnail"><img src="Media/Images/DSC_0245.jpg" width="175px" height="125px" border="0" /><span><img src="Media/Images/DSC_0245.jpg" width="500px" height="450px"/><br />Run wild with horses.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/DSC_0043 (3).JPG" width="225px" text-align="center" height="125px" border="0" /><span><img src="Media/Images/DSC_0043 (3).JPG" width="750px" height="450px"/><br />Run wild with horses.</span></a>
</div>
</section>
</section>
</article>
</div>
<footer>
</footer>
</body>
</html>
.gallerycontainer{
position: relative;
height: 250px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
background-color: #333;
visibility: visible;
top: 0;
left: 250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
欢迎
M015734a@student.staffs.ac.uk
07904921417
英国斯塔福德
公文包工作
3DS Tardis模型。
晚餐吃寿司有人吗?
与马一起狂奔。
与马一起狂奔。
.厨房集装箱{
位置:相对位置;
高度:250px;
/*添加高度属性并设置为最大图像高度以防止重叠*/
}
.缩略图像{
边框:1px纯白;
边距:0 5px 5px 0;
}
.缩略图:悬停{
背景色:透明;
}
.thumbnail span{/*CSS用于放大图像*/
位置:绝对位置;
背景颜色:浅黄色;
填充物:5px;
左:-1000px;
可见性:隐藏;
颜色:黑色;
文字装饰:无;
}
.放大图像的缩略图跨度img{/*CSS*/
填充:2px;
}
.缩略图:悬停span{/*CSS用于放大图像*/
背景色:#333;
能见度:可见;
排名:0;
左:250px;/*放大图像应水平偏移的位置*/
z指数:50;
}
我不会隐藏第一幅图像,而是给它一个较低的z索引,以便其他图像浮在上面。但这仅在图像尺寸相同时才起作用
HTML
更新
从小提琴中的代码中,您在实现此功能的过程中错过了两件重要的事情:
.thumbnail:hover span、.thumbnail span.first
。您只有原始选择器。-这将对“第一个”跨距应用与“悬停”跨距相同的样式缩略图span的代码中缺少前导“.”。首先
——这会调整“第一”span的z索引,以便其他span显示在其上方我已经在中添加了CSS,并在中添加了行,但是我仍然无法在空格中显示第一个图像。将您的代码添加到jsfiddle()保存它并将url发布回此处,我将进一步查看。代码太多了。。。。只需发布与问题相关的内容。我把它剪下来了。我很快会更新我的答案。带有绝对URL的图像也很好,我们可以在fidle中看到它们。对于图像加载时间缓慢,我们深表歉意,它们需要压缩stillHi,效果非常好!然而,还有另一个问题,因为当图像切换时,我的图像下面有标题,所以我为第一个图像键入的文本始终位于其他图像的后面。这有什么解决办法吗?
<div class="gallerycontainer">
<a class="thumbnail"><img src="Media/Images/Tardis.bmp" width="225px" height="125px" border="0" /><span class="first"><img src="Media/Images/Tardis.bmp" width="750px" height="450px"/><br />3DS Tardis Model.</span></a>
<br />
<a class="thumbnail"><img src="Media/Images/Main Station.png" width="225px" height="125px" border="0" /><span><img src="Media/Images/Main Station.png" width="750px" height="450px" /><br /></span></a>
<br />
.thumbnail:hover span, .thumbnail span.first{ /*CSS for enlarged image*/
background-color: #FFF;
visibility: visible;
top: 0;
left: 250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.thumbnail span.first
{
z-index: 10 !important; /*Lower z-index for first one so others appear above it */
}