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

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 >
      <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  id="img-1"></div>
        <h2 >Tokyo - Japan</h2>
        <p >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.

CodePudding user response：

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 >
      <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  src="https://thumbs.dreamstime.com/b/shinjuku-gyoen-national-garden-tokyo-japan-large-park-shibuya-lake-asian-153188061.jpg" >
        <h2 >Tokyo - Japan</h2>
        <p >Lorem ipsum dolor sit amet.</p>
      </div>
</section>

CodePudding user response：

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.