CSS Hover and Display Inline Block not working properly-CodePudding

Problem is when I hover, the overlay affects all the items, i would like it to do one at a time, not all at once and also I can't get the display to show Inline-Block, items seem to be taking up the whole row, once it's fixe i know i will have to adjust the figcaption because ideally that would need to be centered under each image... anything helps. THanks!

const productData = document.querySelector('.wrap');

const productsOne = [{
    Name: "Almonds",
    id: 1,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Kit Kat",
    id: 2,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "PopCorn",
    id: 3,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Peanuts",
    id: 4,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Oreos",
    id: 5,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },


]

document.getElementById('productspage1').innerHTML = productsOne.map(products =>
  `
  

  <div id="${products.id}">
  <a href="${products.href}">
  <img src="${products.src}" width="260" height="195">
  <div >${products.Name}</div>
  </a>
  <br>
  <center>
  <figcaption>
  <center>
  <label >
  <input type="checkbox"name="${products.id}">
  <span >
  </span>
  </label>
  </center>
  </figcaption>
  </center>
  </div>

  `
).join('<br><br>')

figcaption {
  left: 200%;
   
}



.wrap *{ 
  display: inline-block;
  max-height: 195px;
  max-width: 260px;
  position: relative;
  background: #fff;

  
}
.text {
  background: rgba(0,0,0,0.8);
  color: #fff;
  transition: opacity .5s;
  opacity: 0;
  position: absolute;
  top: 0em; bottom: 0em; left: 0em; right: 0em;
  display: flex;
  justify-content: center;
  align-items: center;
}



.wrap div:hover .text {
  opacity: 1;
}


img {
  max-width: 100%;
  display: inline-block;
}






/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
 
}


/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked   .slider {
  background-color: #49ba14;
}

input:focus   .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked   .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <div >
    <div id="productspage1">
    </div></div>
</html>

CodePudding user response：

You are targetting every div which has the .wrap div as an ancestor.

So this includes the oveerarching productspage1 div.

This snippet is more specific in targeting those divs that have the .wrap div as grandparent.

const productData = document.querySelector('.wrap');

const productsOne = [{
    Name: "Almonds",
    id: 1,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Kit Kat",
    id: 2,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "PopCorn",
    id: 3,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Peanuts",
    id: 4,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },
  {
    Name: "Oreos",
    id: 5,
    src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",
    href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"
  },


]

document.getElementById('productspage1').innerHTML = productsOne.map(products =>
  `
  

  <div id="${products.id}">
  <a href="${products.href}">
  <img src="${products.src}" width="260" height="195">
  <div >${products.Name}</div>
  </a>
  <br>
  <center>
  <figcaption>
  <center>
  <label >
  <input type="checkbox"name="${products.id}">
  <span >
  </span>
  </label>
  </center>
  </figcaption>
  </center>
  </div>

  `
).join('<br><br>')

figcaption {
  left: 200%;
}

.wrap * {
  display: inline-block;
  max-height: 195px;
  max-width: 260px;
  position: relative;
  background: #fff;
}

.text {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  transition: opacity .5s;
  opacity: 0;
  position: absolute;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap>div>div:hover .text {
  opacity: 1;
}

img {
  max-width: 100%;
  display: inline-block;
}


/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked .slider {
  background-color: #49ba14;
}

input:focus .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div >
  <div id="productspage1">
  </div>
</div>

</html>