style.css

* {
    font-family: 'Amatic SC', cursive;
    box-sizing: border-box;
    /* margin: 0px; */
    }

body {
    margin: auto;
    background-color: #e9e5dd;
    max-width: 1000px;
    padding: 1rem;
    background-color: black;

}
section{

}
div#gallery {
    max-width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* grid-template-rows: repeat(2); */
    margin: auto;
}

poster{
    position: relative;
    max-height: 900px;
    flex: 50%;
    /* pointer-events: auto; */
}

img {
    width: 100%;
}

poster:hover div#content{
    transition-duration: 1000ms;
    opacity: 80%;
    background-color: rgb(255, 255, 255);
}

h1{
    color: white;
}
h2 {
    text-align: center;
    color: white;
}

div#content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

h3{
    opacity: 0%;
    text-align: center;
    font-size: 2rem;
    /* position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; */

}
poster:hover h3 {
    transition-duration: 1000ms;
    opacity: 100%;
}

p {
    /* pointer-events: none; */
    opacity: 0%;
    /* top: 30%;
    left: 50%;   
    transform: translate(-50%, -50%);
    position: absolute; */
    text-align: center;
    font-size: 1.5rem;
}

poster:hover p {
    transition-duration: 1000ms;
    opacity: 100%;
}

h4 {
  margin-bottom: .5rem;
}

@media (max-width: 600px) {
    poster {
        flex: 100%;
        /* flex-direction: column; */
    }
  }