Popup Position

[Joep]

With CSS you can solve this with the CSS BEFORE function. Below an example we use. The extra class for the slider in this exampe is kleurtemperatuur so make sure you use it correct.

.kleurtemperatuur::before {
box-sizing: border-box;
transform: scale(1);
-webkit-filter: blur(20px) saturate(1.1) brightness(1.1);
filter: blur(20px) saturate(1.1) brightness(1.1);
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
top: -50%;
left: -50%;
padding-top: 100%;
background-image:
linear-gradient(330deg, transparent 50%, #FFFF66 50%),
linear-gradient(300deg, transparent 50%, #FFFF55 50%),
linear-gradient(270deg, transparent 50%, #FFFF44 50%),
linear-gradient(240deg, transparent 50%, #FFFFEE 50%),
linear-gradient(210deg, transparent 50%, #FFFFFF 50%),
linear-gradient(180deg, transparent 50%, #FFFFDD 50%),
linear-gradient(150deg, transparent 50%, #FFFFCC 50%),
linear-gradient(120deg, transparent 50%, #FFFFBB 50%),
linear-gradient(90deg, transparent 50%, #FFFFAA 50%),
linear-gradient(60deg, transparent 50%, #FFFF99 50%),
linear-gradient(30deg, transparent 50%, #FFFF88 50%),
linear-gradient(0deg, transparent 50%, #FFFF77 50%);
background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
}

.kleurtemperatuur {
position: absolute;
width: 150px; /* Breedte van de cirkel slider */
height: 150px; /* Hoogte van de cirkel slider */
border-radius: 50%;
overflow: hidden;
}