carousel.css

.carousel-1::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(6\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-1{
    position: relative;
    width: 20em;
    height: 24em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.carousel-1 h3, .carousel-1 p{
    display: none;
}

.carousel-1:hover p,.carousel-1:hover h3{
    display: flex;
}
.carousel-2::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(7\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-2{
    position: relative;
    width: 20em;
    height: 13em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.carousel-2 h3, .carousel-2 p{
    display: none;
}

.carousel-2:hover p,.carousel-2:hover h3{
    display: flex;
}
.carousel-3::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images.jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-3{
    position: relative;
    width: 20em;
    height: 24em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.carousel-3 h3, .carousel-3 p{
    display: none;
}

.carousel-3:hover p,.carousel-3:hover h3{
    display: flex;
}
.carousel-4::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(3\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-4{
    position: relative;
    width: 20em;
    height: 13em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.carousel-4 h3, .carousel-4 p{
    display: none;
}

.carousel-4:hover p,.carousel-4:hover h3{
    display: flex;
}
.carousel-5::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(1\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-5{
    position: relative;
    width: 20em;
    height: 24em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center; 
}

.carousel-5 h3, .carousel-5 p{
    display: none;
}

.carousel-5:hover p,.carousel-5:hover h3{
    display: flex;
}
.carousel-6::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(4\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-6{
    position: relative;
    width: 20em;
    height: 13em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center; 
}

.carousel-6 h3, .carousel-6 p{
    display: none;
}

.carousel-6:hover p,.carousel-6:hover h3{
    display: flex;
}
.carousel-7::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(5\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-7{
    position: relative;
    width: 20em;
    height: 24em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center; 
    z-index: 10;
}

.carousel-7 h3, .carousel-7 p{
    display: none;
}

.carousel-7:hover p,.carousel-7:hover h3{
    display: flex;
}
.carousel-8::after{
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(./img/images\ \(7\).jpg) no-repeat;
    background-size: cover;
    top: 0%;
    z-index: -90;
}

.carousel-8{
    position: relative;
    width: 20em;
    height: 13em;
    border-radius: 10px;
    margin-bottom: 0px;
    transition: all 55s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center; 
}

.carousel-8 h3, .carousel-8 p{
    display: none;
}

.carousel-8:hover p,.carousel-8:hover h3{
    display: flex;
}