jQuery addClass example

Change class name on click in jQuery

HTML

<div class="integrate__card card no-padding" style="padding-top: 30px; text-align: center;">
    <img src="https://activebooker.com/assets/contest/spin_wheel/img/wheel.svg" id="wheel"><br>
    <img src="https://activebooker.com/assets/contest/spin_wheel/img/pin.svg" id="pin"><br>
</div>

CSS

#wheel {
    display: inline-block;
    width: 90%;
    height: 90%;
    max-width: 800px;
    max-height: 800px;
    margin-top: 6%;
    transition: transform 10s cubic-bezier(.5,.1,.15,1);
    transform: rotate(0deg);
    z-index: 1;
    pointer-events: none;
}

#pin {
    display: block;
    min-width: 20px;
    max-width: 50px;
    height: auto;
    position: absolute;
    top: -3%;
    left: 46%;
    z-index: 2;
    padding-top: 40px;
}

@media only screen and (min-width: 1200px) {
    #pin {
        left: 46%;
        background: green;
    }
}
@media only screen and (max-width:1100px) {
    #pin {
        left: 45%;
        background: blue;
    }
}
@media only screen and (max-width:769px) {
    #pin {
        left: 44.7%;
        background: yellow;
    }
}