css 我怎样才能正确显示我的图片库使用h2

kg7wmglp  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(148)

所以我正在做一个图片库,可以垂直滚动,图片居中,间距相等,当鼠标悬停时,图片会放大,标题会显示出来。

h2

background-image

但是当我把它们放在一起的时候,h2就会塌缩在一起。
这就是我想要的

但这就是我现在得到的

现在我的代码是这样的HTML:

<div id="gallery">
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                            <h2 style="background-image: url(img/image-presentation.jpg);">
                                Concert</h2>
                        </div>

CSS:

#projet .content .window #gallery {
    text-align: center;
    height: 40vh;
    overflow-y: scroll;
    padding: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    display: block;
}

#projet .content .window #gallery h2 {
    width: 25vh;
    height: 25vh;
    border-radius: 1vh;
    margin: 1.5vh;
    display: table-cell;
    vertical-align: middle;
    color: transparent;

    background-size: cover;
    background-repeat: no-repeat;

    transition: all 0.2s ease;
}

#projet .content .window #gallery h2:hover {    
    color: black;    
    backdrop-filter: blur(10px);
    transform: scale(1.2);
}

我不知道该做什么,也不知道我做错了什么。
有人能帮帮我吗?
我在css中尝试了不同的显示

#gallery

但是我找不到一个正确的方法来使它工作

b1uwtaje

b1uwtaje1#

您可以为每个图像使用单独的div,而不是将image用作h2标签的background-imgage,如下所示:

<div id="gallery">
    <div class="image">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>Concert<h2>
    </div>
    <div class="image">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>Concert<h2>
    </div>
    <div class="image">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>Concert<h2>
    </div>
    <div class="image">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>Concert<h2>
    </div>
    <div class="image">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>Concert<h2>
    </div>
</div>

对于CSS,您可以使用flex,如下所示:

#gallery{
    display:flex;
    width: 80%;
    flex-wrap: wrap;
 }
.image{width: 33%}
deyfvvtc

deyfvvtc2#

使用<h2>标签的“background-image”不是正确的方法。您应该创建一个<div>,其中您放置了一个<img>作为图像,一个<h2>作为文本。或者您可以在图像上使用伪元素,而不是<h2><div>。如果您想要放置它们,您可以使用display: grid;display: flex;
我试着当场写,因为这应该是一种可能性。

超文本标记语言

<div id="gallery">
    <div class="image-container">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>My Title<h2>
    </div>
    <div class="image-container">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>My Title<h2>
    </div>
    <div class="image-container">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>My Title<h2>
    </div>
    <div class="image-container">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>My Title<h2>
    </div>
    <div class="image-container">
        <img src="img/image-presentation.jpg" alt="image">
        <h2>My Title<h2>
    </div>
</div>

中央支助组

#projet .content .window #gallery {
    display: grid;
    column-gap: 50px;
    row-gap: 50px;
    grid-template-columns: auto auto auto;
    padding: 10px;
}

.image-container {
    position: relative;
    width: 300px;
    height: 500px;
}

.image-container img {
    width: 100%;
    height: 100%;
    transition: all 1s;
    z-index: 10;
}

.image-container img:hover {
    transform: translateY(-30px);
}

.image-container h2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.image-container img:hover+h2 {
    opacity: 1;
}

相关问题