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!
JavaScript
x
61
61
1
const productData = document.querySelector('.wrap');2
3
const productsOne = [{4
Name: "Almonds",5
id: 1,6
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",7
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"8
},9
{10
Name: "Kit Kat",11
id: 2,12
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",13
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"14
},15
{16
Name: "PopCorn",17
id: 3,18
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",19
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"20
},21
{22
Name: "Peanuts",23
id: 4,24
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",25
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"26
},27
{28
Name: "Oreos",29
id: 5,30
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",31
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"32
},33
34
35
]36
37
document.getElementById('productspage1').innerHTML = productsOne.map(products =>38
`39
40
41
<div id="${products.id}">42
<a href="${products.href}">43
<img src="${products.src}" width="260" height="195">44
<div class="text">${products.Name}</div>45
</a>46
<br>47
<center>48
<figcaption>49
<center>50
<label class="switch">51
<input type="checkbox"name="${products.id}"class="single-checkbox">52
<span class="slider round">53
</span>54
</label>55
</center>56
</figcaption>57
</center>58
</div>59
60
`61
).join('<br><br>')JavaScript
1
109
109
1
figcaption {2
left: 200%;3
4
}5
6
7
8
.wrap *{ 9
display: inline-block;10
max-height: 195px;11
max-width: 260px;12
position: relative;13
background: #fff;14
15
16
}17
.text {18
background: rgba(0,0,0,0.8);19
color: #fff;20
transition: opacity .5s;21
opacity: 0;22
position: absolute;23
top: 0em; bottom: 0em; left: 0em; right: 0em;24
display: flex;25
justify-content: center;26
align-items: center;27
}28
29
30
31
.wrap div:hover .text {32
opacity: 1;33
}34
35
36
img {37
max-width: 100%;38
display: inline-block;39
}40
41
42
43
44
45
46
/* The switch - the box around the slider */47
.switch {48
position: relative;49
display: inline-block;50
width: 50px;51
height: 24px;52
53
}54
55
56
/* Hide default HTML checkbox */57
.switch input {58
opacity: 0;59
width: 0;60
height: 0;61
}62
63
/* The slider */64
.slider {65
position: absolute;66
cursor: pointer;67
top: 0;68
left: 0;69
right: 0;70
bottom: 0;71
background-color: #ccc;72
-webkit-transition: .4s;73
transition: .4s;74
}75
76
.slider:before {77
position: absolute;78
content: "";79
height: 17px;80
width: 17px;81
left: 4px;82
bottom: 4px;83
background-color: white;84
-webkit-transition: .4s;85
transition: .4s;86
}87
88
input:checked + .slider {89
background-color: #49ba14;90
}91
92
input:focus + .slider {93
box-shadow: 0 0 1px #2196F3;94
}95
96
input:checked + .slider:before {97
-webkit-transform: translateX(26px);98
-ms-transform: translateX(26px);99
transform: translateX(26px);100
}101
102
/* Rounded sliders */103
.slider.round {104
border-radius: 34px;105
}106
107
.slider.round:before {108
border-radius: 50%;109
}JavaScript
1
7
1
<html>2
<meta charset="UTF-8">3
<meta name="viewport" content="width=device-width, initial-scale=1.0">4
<div class="wrap">5
<div id="productspage1">6
</div></div>7
</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.
JavaScript
1
61
61
1
const productData = document.querySelector('.wrap');2
3
const productsOne = [{4
Name: "Almonds",5
id: 1,6
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",7
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"8
},9
{10
Name: "Kit Kat",11
id: 2,12
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",13
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"14
},15
{16
Name: "PopCorn",17
id: 3,18
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",19
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"20
},21
{22
Name: "Peanuts",23
id: 4,24
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",25
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"26
},27
{28
Name: "Oreos",29
id: 5,30
src: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png",31
href: "https://happywellbox.com/wp-content/uploads/2022/04/HAPPY-hellbox-01.png"32
},33
34
35
]36
37
document.getElementById('productspage1').innerHTML = productsOne.map(products =>38
`39
40
41
<div id="${products.id}">42
<a href="${products.href}">43
<img src="${products.src}" width="260" height="195">44
<div class="text">${products.Name}</div>45
</a>46
<br>47
<center>48
<figcaption>49
<center>50
<label class="switch">51
<input type="checkbox"name="${products.id}"class="single-checkbox">52
<span class="slider round">53
</span>54
</label>55
</center>56
</figcaption>57
</center>58
</div>59
60
`61
).join('<br><br>')JavaScript
1
106
106
1
figcaption {2
left: 200%;3
}4
5
.wrap * {6
display: inline-block;7
max-height: 195px;8
max-width: 260px;9
position: relative;10
background: #fff;11
}12
13
.text {14
background: rgba(0, 0, 0, 0.8);15
color: #fff;16
transition: opacity .5s;17
opacity: 0;18
position: absolute;19
top: 0em;20
bottom: 0em;21
left: 0em;22
right: 0em;23
display: flex;24
justify-content: center;25
align-items: center;26
}27
28
.wrap>div>div:hover .text {29
opacity: 1;30
}31
32
img {33
max-width: 100%;34
display: inline-block;35
}36
37
38
/* The switch - the box around the slider */39
40
.switch {41
position: relative;42
display: inline-block;43
width: 50px;44
height: 24px;45
}46
47
48
/* Hide default HTML checkbox */49
50
.switch input {51
opacity: 0;52
width: 0;53
height: 0;54
}55
56
57
/* The slider */58
59
.slider {60
position: absolute;61
cursor: pointer;62
top: 0;63
left: 0;64
right: 0;65
bottom: 0;66
background-color: #ccc;67
-webkit-transition: .4s;68
transition: .4s;69
}70
71
.slider:before {72
position: absolute;73
content: "";74
height: 17px;75
width: 17px;76
left: 4px;77
bottom: 4px;78
background-color: white;79
-webkit-transition: .4s;80
transition: .4s;81
}82
83
input:checked+.slider {84
background-color: #49ba14;85
}86
87
input:focus+.slider {88
box-shadow: 0 0 1px #2196F3;89
}90
91
input:checked+.slider:before {92
-webkit-transform: translateX(26px);93
-ms-transform: translateX(26px);94
transform: translateX(26px);95
}96
97
98
/* Rounded sliders */99
100
.slider.round {101
border-radius: 34px;102
}103
104
.slider.round:before {105
border-radius: 50%;106
}JavaScript
1
9
1
<html>2
<meta charset="UTF-8">3
<meta name="viewport" content="width=device-width, initial-scale=1.0">4
<div class="wrap">5
<div id="productspage1">6
</div>7
</div>8
9
</html>