Get a different hover text/button for every element on a grid area

Issue

apologies if this question is silly but my knowledge is very basic on this. Please I would like to know if it’s possible on a 10 grid area in HTML/CSS to display a different text on hover or button for any of the 10 members of the grid.

I have the following code which I don’t have a problem until here (it displays well in mobile and pc):

<style>
.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 2 / 1; }
.item7 { grid-area: 2 / 2; }
.item8 { grid-area: 2 / 3; }
.item9 { grid-area: 2 / 4; }
.item10 { grid-area: 2 / 5; }

.container {
display: grid;
position: relative;
}

.container > div {
text-align: center;
font-size: 10px;
}

.container img {
width: 100%;
height: 100%;
}

</style>


<div class="container">

<div class="item1"><img src="Image1"></div>

<div class="item2"><img src="Image2"></div>

<div class="item3"><img src="Image3"></div>

<div class="item4"><img src="Image4"></div>

<div class="item5"><img src="Image5"></div>

<div class="item6"><img src="Image6"></div>

<div class="item7"><img src="Image7"></div>

<div class="item8"><img src="Image8"></div>

<div class="item9"><img src="Image9"></div>

<div class="item10"><img src="Image10"></div>

</div>

The problem comes when I try to add a button or text on hover, since the new element goes to all the grid, and I would like a button for each of the areas in the grid or one different text for each of the 10 areas.

This is the new containers and the to button class I am adding to show the button on the 1st element alone (but it goes to the whole grid):

.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #f1f1f1;
color: black;
font-size: 16px;
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}

.container .btn:hover {
background-color: black;
color: white;
}

</style>


<div class="container">

<div class="item1"><img src="Image1">
<button class="btn">Button1</button>
</div>

<div class="item2"><img src="Image2"></div>
...

And finally, this is the new containers and the overlay div class I am adding to show a hover text on the 1st element alone (but it goes again to the whole grid-area):

.overlay {
position: absolute; 
bottom: 0; 
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1; 
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}


</style>


<div class="container">

<div class="item1"><img src="Image1">
<div class="overlay">Text1</div>
</div>

<div class="item2"><img src="Image2"></div>
...

Solution

You can follow the below code

.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 2 / 1; }
.item7 { grid-area: 2 / 2; }
.item8 { grid-area: 2 / 3; }
.item9 { grid-area: 2 / 4; }
.item10 { grid-area: 2 / 5; }

.container {
display: grid;
position: relative;
}

.container > div {
text-align: center;
font-size: 10px;
position: relative;
}

.container img {
width: 100%;
height: 100%;
}


.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.container div:hover .overlay {
  opacity: 1;
}

<div class="container">

<div class="item1">
  <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" width="100%">
  <div class="overlay">Text1</div>
</div>

<div class="item2">
  <img src="https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg" width="100%">
  <div class="overlay">Text2</div>
</div>

<div class="item3">
  <img src="https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg" width="100%">
  <div class="overlay">Text3</div>
</div>

<div class="item4">
  <img src="https://cdn-prod.medicalnewstoday.com/content/images/articles/325/325466/man-walking-dog.jpg" width="100%">
  <div class="overlay">Text4</div>
</div>

</div>

Answered By – WLI Frontend Team

Answer Checked By – Pedro (AngularFixing Volunteer)