个人中心
gpt4 book ai didi

html - CSS 图片库

转载 作者：行者123 更新时间：2023-11-28 13:28:56 26 4
gpt4 key购买 nike

我的图库在滚动时工作正常，虽然在图像放大的部分，我希望图库中的第一张图片自动出现在那里，目前它只显示一个空白框，直到你悬停在图像上。

<!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;
}

最佳答案

我不会隐藏第一张图片，而是给它一个较低的 z-index，以便其他图片浮在上面。这仅在图像尺寸相同时才有效。

HTML

<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 />

CSS

.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 */
 }

更新

从你的 fiddle 代码中，你错过了实现这个的 2 件重要事情:

  1. 注意这里的两个选择器(我的 CSS 代码片段的第一行):.thumbnail:hover span, .thumbnail span.first。你只有你原来的选择器。 -- 这对“第一个”跨度应用与“悬停”跨度相同的样式
  2. 前导“.” .thumbnail span.first 的代码中缺少 - 这会调整“第一个”跨度的 z-index，以便其他跨度出现在它上面。

更新 2

span 需要背景颜色来遮盖第一张图片的文本。此外，如果图像具有透明度，但没有背景颜色，第一张图像将显示。更新 fiddle 显示了这一点。

Example Fiddle

关于html - CSS 图片库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13793472/

26 4 0
文章推荐： loops - 最小高度，最小宽度在不同图像方向上填充 div
文章推荐： ios - 在 SwiftUI Form 中填充 Section 背景
文章推荐： html - 如何在绝对定位的 div 中居中 div？
文章推荐： html - 使用其他 div 或任何其他方法裁剪图像反射
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com