Auf Thema antworten

Beitrag

[QUOTE="dilly87, post: 13427, member: 4583"]
:D Danke für die schnelle Rückmeldung. Also da ich grade nicht genau eingrenzen kann wo der Fehler liegt, werf' ich mal den gesamten CSS für's Grid rein.
Dazu noch ein kleines Bild wie die Lücke entsteht.

Danke!

[CODE]body{
    margin: 20px;
    padding: 0;
    text-align: center;
    margin-bottom: 50px;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px 300px;
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

.gallery-item{
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-item .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-item .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: .5s ease-in-out;
}

.gallery-item:hover .image img{
    transform: scale(1.1);
    filter: brightness(65%);
   }

.gallery-item .text{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 45px;
    line-height: 55px;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
    }

.gallery-item .text2{
        opacity: 0;
        width: 100%;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%);
        color:orange;
        font-size: 25px;
        transition: .6s ease-in-out;
    }
    
.gallery-item:hover .text{
    opacity: 1;
    animation: move-down .3s linear;
    padding: 1em;
    width: 100%;
}

.gallery-item:hover .text2{
    opacity: 1;
    animation: ease-in .6s linear;
    padding: 0em;
    width: 100%;
}

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-5{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}

@media screen and (max-width:500px){
    grid-template-columns: repeat(2, 1fr);
}

@keyframes move-down{
    0%{
        top: 10%;
    }
    50%{
        top: 30%;
    }
    100%{
        top: 50%;
    }
}[/CODE]

[ATTACH type="full"]345[/ATTACH]
[/QUOTE]

Authentifizierung