Is there a way to place text over image without background-image, or position: relative?

Question

My situation is that I don't want it as a background-image because I'm changing the opacity on hover, and so that it didn't affect the text as well I made them separate elements. However, moving them using position: relative; means that I am left with blank space where their supposed to be in page flow.

Any help would be greatly appreciated.

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}

div {
    width: 24%;
    min-width: 400px;
    height: 25em;
    transition: 200ms;
    margin: 1rem 0;
}

div.background-img {
    width: 100%;
    height: 100%;
}

#img-1 {
    background-image: url("imgs/tokyo.jpg");
}

/* Later in code */ 

.background-img:hover {
    transition: 200ms;
    filter: brightness(50%);
    outline: 1px white solid;
    outline-offset: -20px;
    border-radius: 5%;
}

div .hidden-text {
    transition: 200ms;
    position: relative;
    bottom: 100%;
    color: white;
    opacity: 0;
    pointer-events: none;
}

div:hover .hidden-text {
    transition: 200ms;
    color: rgb(255, 255, 255, 1);
    opacity: 1;
}

<section class="flex-container">
      <div>
        <h1>Holiday Destinations</h1>
        <span>This is a collection of locations that I either would love to visit, or loved visiting.</span>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat totam
          eum asperiores assumenda, amet rem molestiae pariatur at nulla sequi
          debitis itaque voluptatem modi corrupti fugiat sed quod dolores
          perspiciatis maiores in! Tenetur molestiae eum cupiditate obcaecati
          consectetur. Culpa consequatur doloribus, non voluptates quia commodi
          dolore mollitia cupiditate modi dolorem?
        </p>
      </div>
      <div>
        <div class="background-img" id="img-1"></div>
        <h2 class="hidden-text">Tokyo - Japan</h2>
        <p class="hidden-text">Lorem ipsum dolor sit amet.</p>
      </div>
</section>

Website here --> https://dex-hewitt.github.io/holiday-destinations

Thank you!

Also please let me know if I've written question poorly or not included any necessary parts I am new to stackoverflow.

Answer 1

Sorry all, a typo mistake on my end. While I thought it was the texts border box causing the blank space, I found it to be a missing "/" symbol on a lower div.

Answer 2

You can approach it this way if you don't want it to be as a background. Let me know

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
}

div {
    width: 24%;
    min-width: 400px;
    height: 25em;
    transition: 200ms;
    margin: 1rem 0;
}

div.background-img {
    width: 100%;
    height: 100%;
    
}

div img {
width: 500px;
height: 500px;
object-fit: cover;
}

/* Later in code */ 

.background-img:hover {
    transition: 200ms;
    filter: brightness(50%);
    outline: 1px white solid;
    outline-offset: -20px;
    border-radius: 5%;
}

div .hidden-text {
    transition: 200ms;
    position: relative;
    bottom: 100%;
    color: white;
    opacity: 0;
    pointer-events: none;
    text-align: center;
}

div:hover .hidden-text {
    transition: 200ms;
    color: rgb(255, 255, 255, 1);
    opacity: 1;
}

<section class="flex-container">
      <div>
        <h1>Holiday Destinations</h1>
        <span>This is a collection of locations that I either would love to visit, or loved visiting.</span>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat totam
          eum asperiores assumenda, amet rem molestiae pariatur at nulla sequi
          debitis itaque voluptatem modi corrupti fugiat sed quod dolores
          perspiciatis maiores in! Tenetur molestiae eum cupiditate obcaecati
          consectetur. Culpa consequatur doloribus, non voluptates quia commodi
          dolore mollitia cupiditate modi dolorem?
        </p>
      </div>
     <div>
        <img class="background-img" src="https://thumbs.dreamstime.com/b/shinjuku-gyoen-national-garden-tokyo-japan-large-park-shibuya-lake-asian-153188061.jpg" >
        <h2 class="hidden-text">Tokyo - Japan</h2>
        <p class="hidden-text">Lorem ipsum dolor sit amet.</p>
      </div>
</section>