我正在处理一个包含一些图像的库页面。
我决定将我的图像包含在<li>元素中。html:
<div class="gallery-container">
<ul class="gallery">
<li class="image"><img src="./images/dungeon.jpg" alt="image of the game">1</li>
<li class="image"><img src="./images/gallery-background2.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/html-background-for-gallery.webp" alt="image of the game"></li>
<li class="image"><img src="./images/navbackground.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/nsv-bsckground2.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/shrine.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/waterfall.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/city-center.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/elven-trials.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/huge-spider.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/hell-fire.jpg" alt="image of the game"></li>
<li class="image"><img src="./images/hydrosophic-chaos.jpg" alt="image of the game"></li>
</ul>
</div>
我需要在悬停时显示图像的名称，因此我考虑使用文本的positioning或img。但我尝试过的似乎都不起作用，除此之外，我对positioning不是特别流利。
css：
.gallery-container {
border: 2px black solid;
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
gap: 10px;
}
.gallery li {
max-width: 40%;
}
img {
display: block;
margin: 0.5em 0.5em;
max-width: 90%;
}
我正在寻找方法，在不破坏页面当前布局的情况下，使<li>元素中包含的图像覆盖文本，最好文本位于<li>元素的中心(text-align: center;可能会在定位问题排序后发挥作用)。css和html还有更多要求您认为有必要的完整代码。
提前谢谢。
@Simp4Code我最终使用了positioning，它最终可以更好地使用现有代码。
.gallery-container {
border: 2px black solid;
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
gap: 10px;
}
.gallery li {
max-width: 40%;
}
img {
display: block;
margin: 0.5em 0.5em;
max-width: 90%;
}
.image {
position: relative;
transition: 0.4s;
cursor: pointer;
max-width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
}
.image:hover {
transform: scale(1.2);
opacity: 0.5;
}
.image-name {
position: absolute;
color: ivory;
background-color: rgb(94, 88, 94);
opacity: 0;
}
.image:hover .image-name {
opacity: 1;
transition: 500ms;
}<div class="gallery-container">
<ul class="gallery">
<li class="image">
<img src="https://picsum.photos/500?random=1" alt="random image">
<div class="image-name">one</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=2" alt="random image">
<div class="image-name">two</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=3" alt="random image">
<div class="image-name">three</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=4" alt="random image">
<div class="image-name">four</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=5" alt="random image">
<div class="image-name">five</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=6" alt="random image">
<div class="image-name">six</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=7" alt="random image">
<div class="image-name">seven</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=8" alt="random image">
<div class="image-name">eight</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=9" alt="random image">
<div class="image-name">nine</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=10" alt="random image">
<div class="image-name">ten</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=11" alt="random image">
<div class="image-name">eleven</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=12" alt="random image">
<div class="image-name">twelve</div>
</li>
</ul>
</div>如果您不想使用position属性，那么可以使用display: grid通过使其子级占据同一行来实现这一点——这对于绘制计算来说比定位元素以及更容易
* { box-sizing: border-box } body { color: white; font: 16px sans-serif; margin: 0 }
.gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 1.5rem;
padding: 1.5rem;
list-style: none;
}
/* Make <li> a grid and place children in center */
.image {
display: grid;
place-items: center;
}
/* Make grid children occupy the same space */
.image > * { grid-area: 1/1/-1/-1 }
.image > img {
display: block;
width: 100%;
}
/* For visual styling only -- does not affect layout */
.gallery {
border: 2px black solid;
margin: 1.5rem auto;
max-width: 1000px;
}
.image {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
border-radius: .375em;
cursor: pointer;
overflow: hidden;
transform: scale(1) rotate(0);
transition: box-shadow 250ms ease-in-out, transform 250ms ease-in-out;
}
.image > img {
opacity: 1;
transition: opacity 250ms ease-in-out;
}
.image > div {
background: rgba( 0, 0, 0, 0.5 );
border-radius: 0.375em;
font-weight: bold;
padding: 0.5rem 1rem;
transform: translateY(-3em) scale(0) rotate(0);
transition: transform 500ms ease-in-out;
}
.image:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
z-index: 1;
}
.image:nth-child(odd):hover { transform: scale(1.075) rotate(-2deg) }
.image:nth-child(even):hover { transform: scale(1.075) rotate(2deg) }
.image:hover > img { opacity: 0.75 }
.image:nth-child(odd):hover > div { transform: translateY(0) scale(1.125) rotate(-360deg) }
.image:nth-child(even):hover > div { transform: translateY(0) scale(1.125) rotate(360deg) }<ul class="gallery">
<li class="image">
<img src="https://picsum.photos/500?random=1" alt="random image">
<div>overlay 1</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=2" alt="random image">
<div>overlay 2</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=3" alt="random image">
<div>overlay 3</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=4" alt="random image">
<div>overlay 4</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=5" alt="random image">
<div>overlay 5</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=6" alt="random image">
<div>overlay 6</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=7" alt="random image">
<div>overlay 7</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=8" alt="random image">
<div>overlay 8</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=9" alt="random image">
<div>overlay 9</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=10" alt="random image">
<div>overlay 10</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=11" alt="random image">
<div>overlay 11</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=12" alt="random image">
<div>overlay 12</div>
</li>
</ul>