query: how to set an image and text to accupy the same space in an <li> element-CodePudding

I'm working on a gallery page with a few images.

I've decided to contain my images in an <li> element. html:

<div >
        <ul >
            <li ><img src="./images/dungeon.jpg" alt="image of the game">1</li>
            <li ><img src="./images/gallery-background2.jpg" alt="image of the game"></li>
            <li ><img src="./images/html-background-for-gallery.webp" alt="image of the game"></li>
            <li ><img src="./images/navbackground.jpg" alt="image of the game"></li>
            <li ><img src="./images/nsv-bsckground2.jpg" alt="image of the game"></li>
            <li ><img src="./images/shrine.jpg" alt="image of the game"></li>
            <li ><img src="./images/waterfall.jpg" alt="image of the game"></li>
            <li ><img src="./images/city-center.jpg" alt="image of the game"></li>
            <li ><img src="./images/elven-trials.jpg" alt="image of the game"></li>
            <li ><img src="./images/huge-spider.jpg" alt="image of the game"></li>
            <li ><img src="./images/hell-fire.jpg" alt="image of the game"></li>
            <li ><img src="./images/hydrosophic-chaos.jpg" alt="image of the game"></li>
        </ul>
    </div>

I am required to have the name of the image appear on hover, thus I'm thinking using positioning of either text or img for that purpose. but what ever I tried didn't seem to work, on top of that I'm not particularly fluent in positioning.

css:

.gallery-container {
  border: 2px black solid;
}
.gallery {
  margin-top: 1em;
  margin-bottom: 1em;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gallery li {
  max-width: 40%;
}

img {
  display: block;
  margin: 0.5em 0.5em;
  max-width: 90%;
}

I'm looking for ways to make the image contained in an <li> element to cover the text without breaking the current layout of the page, preferably the text should be at the center of <li> element (text-align: center; would probably do the trick after the positioning issue is sorted). There is more to the css and html ask for the full code of you think its necessary.

Thank you in advance.

CodePudding user response：

@Simp4Code I've ended up going with positioning, it ended up working better with existing code.

.gallery-container {
  border: 2px black solid;
}

.gallery {
  margin-top: 1em;
  margin-bottom: 1em;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gallery li {
  max-width: 40%;
}

img {
  display: block;
  margin: 0.5em 0.5em;
  max-width: 90%;
}

.image {
  position: relative;
  transition: 0.4s;
  cursor: pointer;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image:hover {
  transform: scale(1.2);
  opacity: 0.5;
}

.image-name {
  position: absolute;
  color: ivory;
  background-color: rgb(94, 88, 94);
  opacity: 0;
}

.image:hover .image-name {
  opacity: 1;
  transition: 500ms;
}

<div >
  <ul >
    <li >
      <img src="https://picsum.photos/500?random=1" alt="random image">
      <div >one</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=2" alt="random image">
      <div >two</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=3" alt="random image">
      <div >three</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=4" alt="random image">
      <div >four</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=5" alt="random image">
      <div >five</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=6" alt="random image">
      <div >six</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=7" alt="random image">
      <div >seven</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=8" alt="random image">
      <div >eight</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=9" alt="random image">
      <div >nine</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=10" alt="random image">
      <div >ten</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=11" alt="random image">
      <div >eleven</div>
    </li>
    <li >
      <img src="https://picsum.photos/500?random=12" alt="random image">
      <div >twelve</div>
    </li>
  </ul>
</div>

CodePudding user response：

If you don't want to use position property then this can be done with display: grid by making it's children occupy the same row -- this is easier for paint calculations than positioning an element as well

* { box-sizing: border-box } body { color: white; font: 16px sans-serif; margin: 0 }

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;

  margin: 1.5rem;
  padding: 1.5rem;
  list-style: none;
}

/* Make <li> a grid and place children in center */
.image {
  display: grid;
  place-items: center;
}
/* Make grid children occupy the same space */
.image > * { grid-area: 1/1/-1/-1 }

.image > img {
  display: block;
  width: 100%;
}



/* For visual styling only -- does not affect layout */
.gallery {
  border: 2px black solid;
  margin: 1.5rem auto;
  max-width: 1000px;
}
.image {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.25), 0 2px 4px -2px rgb(0 0 0 / 0.25);
  border-radius: .375em;
  cursor: pointer;
  overflow: hidden;
  transform: scale(1) rotate(0);
  transition: box-shadow 250ms ease-in-out, transform 250ms ease-in-out;
}
.image > img {
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
.image > div {
  background: rgba( 0, 0, 0, 0.5 );
  border-radius: 0.375em;
  font-weight: bold;
  padding: 0.5rem 1rem;
  transform: translateY(-3em) scale(0) rotate(0);
  transition: transform 500ms ease-in-out;
}
.image:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
  z-index: 1;
}
.image:nth-child(odd):hover { transform: scale(1.075) rotate(-2deg) }
.image:nth-child(even):hover { transform: scale(1.075) rotate(2deg) }
.image:hover > img { opacity: 0.75 }
.image:nth-child(odd):hover > div { transform: translateY(0) scale(1.125) rotate(-360deg) }
.image:nth-child(even):hover > div { transform: translateY(0) scale(1.125) rotate(360deg) }

<ul >
  <li >
    <img src="https://picsum.photos/500?random=1" alt="random image">
    <div>overlay 1</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=2" alt="random image">
    <div>overlay 2</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=3" alt="random image">
    <div>overlay 3</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=4" alt="random image">
    <div>overlay 4</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=5" alt="random image">
    <div>overlay 5</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=6" alt="random image">
    <div>overlay 6</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=7" alt="random image">
    <div>overlay 7</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=8" alt="random image">
    <div>overlay 8</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=9" alt="random image">
    <div>overlay 9</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=10" alt="random image">
    <div>overlay 10</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=11" alt="random image">
    <div>overlay 11</div>
  </li>
  <li >
    <img src="https://picsum.photos/500?random=12" alt="random image">
    <div>overlay 12</div>
  </li>
</ul>