Develop Reference

How to create a scrolling image collage with image bubbles?

I want to create a scrolling image collage with image bubbles.
I want Like This
I finished making the design, but I can't understand how can I slide those pictures continuously. I mean auto carousel slider. Please Help me.
var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-8px);
}
100%{
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
<div id="container">
<div class="wrapper">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>

Consider the following. This is not the only way to do this, yet it may help lead you to a solution.
$(function() {
var speed = 1;
var canvas = $(".wrapper");
function float(el) {
var left = $(el).position().left;
var top = $(el).position().top;
left -= (speed + Math.random());
top = top + (Math.random() < 0.5 ? -1 : 1);
if (left < (0 - $(el).width())) {
// Element is offscreen
$(el).css("left", "115%");
} else {
$(el).animate({
left: left,
top: top
});
}
}
var timer = setInterval(function() {
$("[class^='image']").each(function() {
float(this);
});
}, 600);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
div[class^='row'] {
width: 100%;
height: 175px;
position: relative;
}
div[class^='image'] {
position: absolute;
top: 0%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
div.large {
width: 150px;
height: 150px;
}
.image1 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}
.image2 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}
.image3 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}
.image4 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}
.image5 {
left: 0%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}
.image6 {
left: 33%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}
.image7 {
left: 66%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}
.image8 {
left: 100%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
}
.image9 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=9);
}
.image10 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=10);
}
.image11 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=11);
}
.image12 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=12);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="wrapper">
<div class="row-1">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
</div>
<div class="row-2">
<div class="image5 large"></div>
<div class="image6 large"></div>
<div class="image7 large"></div>
<div class="image8 large"></div>
</div>
<div class="row-3">
<div class="image9"></div>
<div class="image10"></div>
<div class="image11"></div>
<div class="image12"></div>
</div>
</div>
</div>
Instead of using CSS to animate the movement, we use jQuery Animate.

If you are able to set up the HTML you won't need to use Javascript.
A simple way is to make sure that you have enough copies of the material you want to scroll and that half of these will at least cover the largest screen size you need to support.
The built-in width of 1150 is too narrow for some common screens, so this snippet has 4 copies, moves them to the left by 50%, then back to the initial position, that way it looks continuous and you can leave CSS (and hopefully the device's GPU) to keep the animation going.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
overflow: hidden;
}
div#container {
width: calc(1150px * 4);
display: flex;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
animation: moveleft 60s infinite linear;
}
.block1,
.block2 {
display: flex;
}
.wrapper {
background: ;
display: inline-block;
rwidth: 100vw;
width: 1150px;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
#keyframes moveleft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
<div id="container">
<div class="block1">
<div class="wrapper" style="/*background: cyan;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: lime;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
<div class="block2">
<div class="wrapper" style="/*background: mauve;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: yellow;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
</div>

Add tooltip arrow with border only background color should be transparent using css [duplicate]

This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 1 year ago.
I'm trying to add a tooltip arrow at the bottom left. Here I use pseudo-classes I want this should be transparent but when I give transparent to :before white color is coming to the top. I had tried but unable to achieve the desired output. Can anyone suggest to me how can I achieve this output. Any help will be appreciated.
body {
background-image: url('https://i.ibb.co/wcTv3Jf/download.jpg');
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 250px;
height: 150px;
background: #80808000;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before {
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tolltip:before {
background: #fff;
}
.tolltip:after {
background: #80808000;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Desired output

One of solutions
body{
background: darkgray;
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: gray;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
}
.tolltip:after,
.tolltip:before{
content: "";
position: absolute;
left: -3px;
bottom: -40px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 100% 0, 0 100%);
background: white;
}
.tolltip:after{
background: gray;
bottom: -32px;
width: 38px;
left: 0px;
}
<div class="tolltip">
contnet
</div>
Edit after updating question.
body{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 35%, rgba(0,212,255,1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip{
width: 250px;
height: 150px;
background: transparent;
border: 3px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
//
padding: 20px;
}
.tolltip:after{
content: "";
position: absolute;
left: -3px;
bottom: -38px;
width: 40px;
height: 40px;
background: red;
clip-path: polygon(0 0, 3px 0, 3px 38px, 36px 0, 40px 0, 0px 45px) ;
background: white;
}
.tolltip:before{
content: "";
position: absolute;
left: 33px;
right: 0px;
bottom: 0;
border-bottom: 3px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>

How can I hide short part of div which is inside the container but show another overflow part

Is it possible to hide short part of div which is inside the container but show another left part overflow.
what I'm saying is that you can simply set the overflow to hidden to hide everything that overflow from particular in that case what I want is the reverse of that.
code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -6px;
width: 13px;
height: 13px;
transform: rotate(45deg);
background: rgba(230, 230, 230, .1);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>
As you can see in the above snippet on the right side of div.magnifier there is div.inside
which I want to show only the outside part looks like an arrow but you see that all parts of that div is being shown.
I know that the above issue is unusual when there is no opacity applied but in my case I want it and also the issue is not causing by the inset on box-shadow.
And if there is any different way that I can do it I'll appreciate that.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -15px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
clip-path: polygon(0 0, 50% 50%, 50% 50%, 0% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>

You can use clip-path function to achieve the same.
i tried these values and got what i suppose you need.
Add this in inside class.
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -8px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
transform: rotate(45deg);
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>

How to make this Gauge differential angles?

I am creating a radial gauge for a dashboard. The following code is my work.
I need to know how to make the starting angle of this to be 15 degrees and how to make the ending angle 165 degrees. Please help me with it.
I need to implement this system so looking forward to getting this done.
I also need to add the tick marks t this. How can I do it? I am trying to use Chart JavaScript for that so please guide me on how can i do it?
Regards.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

Please check may be you want this
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(15deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(165deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>

You need to change 2 things at your css
1 - for ID #needle
transform: rotate(15deg);
2 - for hover #radial:hover span
transform: rotate(165deg);

How to get value from toggle-button yes/No And show retrieve data in button active

Hiii Everyone,
Below is my code to display toggle button yes/no.What i want to do is based on user selection i want to retrieve data.If they choose Yes toggle button javascript variable should have yes string or else no string.
HTML Code
<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
CSS
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #0088cc;
border-color: #0088cc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
I refreed this code from http://www.htmllion.com/css3-toggle-switch-button.html
Below is the output
I tried this jquery to get get:
alert($(this).attr("data-on"));
I dont know how to get selected button data and similarly after get data it will store in database and i want to retrieve from database either yes or no it should be selected as default which will retrieve from database.How can i do with this.Result which i tried in jquery is returning undefined values.Please anyone help me to get out of this problem.Thanks in advance.

Try this:
(function() {
$(document).ready(function() {
$('.switch-input').on('change', function() {
var isChecked = $(this).is(':checked');
var selectedData;
var $switchLabel = $('.switch-label');
console.log('isChecked: ' + isChecked);
if(isChecked) {
selectedData = $switchLabel.attr('data-on');
} else {
selectedData = $switchLabel.attr('data-off');
}
console.log('Selected data: ' + selectedData);
});
});
})();
For Ref: http://jsbin.com/zizuxo/edit?js,console,output

in pure JS :
var result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no'
jQuery in compatibility mode :
var result = jQuery('.switch-input').is(':checked')?'yes':'no';

I combined the above
$('.switch-input').on('change', function() {
result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no';
alert(result);
});