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

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>

Answer 2

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.