Skip to content
Advertisement

CSS Hover and Display Inline Block not working properly

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 class="text">${products.Name}</div>
  </a>
  <br>
  <center>
  <figcaption>
  <center>
  <label class="switch">
  <input type="checkbox"name="${products.id}"class="single-checkbox">
  <span class="slider round">
  </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 class="wrap">
    <div id="productspage1">
    </div></div>
</html>

Advertisement

Answer

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 class="text">${products.Name}</div>
  </a>
  <br>
  <center>
  <figcaption>
  <center>
  <label class="switch">
  <input type="checkbox"name="${products.id}"class="single-checkbox">
  <span class="slider round">
  </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 class="wrap">
  <div id="productspage1">
  </div>
</div>

</html>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement