cek

HTML Code :

<div class="container">
    <!--Button trigger modal-->
    <div class="row my-btn">
        <div class="col text-center"> <button class="btn btn-primary" data-target="#modelId" data-toggle="modal" type="button">Launch Modal</button> </div>
    </div> <!--Modal-->
    <div aria-hidden="true" aria-labelledby="modelTitleId" class="modal fade" id="modelId" role="dialog" tabindex="">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body pl-5 mt-3">
                    <div class="row">
                        <div class="col text-center">
                            <h5 class="font-weight-bold">How'd stream go?</h5>
                            <p class="text-muted">Tell us about stream watching experience</p>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-auto example-block text-center"><label class="radio-inline"> <input class="input-hidden" id="sad" name="emotion" type="radio" /><img height="84" src="https://img.icons8.com/color/100/000000/boring.png" width="84" /></label></div>
                        <div class="col-auto example-block text-center"> <label class="radio-inline"> <input class="input-hidden" id="happy" name="emotion" type="radio" /> <img height="84" src="https://img.icons8.com/color/100/000000/bored.png" width="84" /> </label> </div>
                        <div class="col-auto example-block text-center"> <label class="radio-inline"> <input class="input-hidden" id="exicetd" name="emotion" type="radio" /> <img height="84" src="https://img.icons8.com/color/100/000000/smiling.png" width="84" /> </label> </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <div class="custom-control custom-checkbox checkbox-lg space"><input class="custom-control-input" id="checkbox-2" type="checkbox" /><label class="custom-control-label">Dont' show this again</label> </div> <button class="btn btn-primary" data-dismiss="modal" type="button">Submit</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Code :

body {
    font: 300 18px/1.5 'Rubik', sans-serif;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    background-color: #BA68C8
}

.my-btn {
    margin: 30%
}

.example-block {
    transition: background 0.4s ease-out;
    position: relative;
    display: inline-block;
    height: auto
}

.example-block:hover {
    cursor: pointer;
    animation: levitate 1s ease-in-out infinite
}

@keyframes levitate {
    0% {
        transform: translate(0, 0px)
    }

    50% {
        transform: translate(0, -9px)
    }

    100% {
        transform: translate(0, 0px)
    }
}

.example-block .image {
    transition: ease-in-out, transform 0.4s ease-in- out
}

.example-block:hover .image {
    transform: scale(1.8)
}

.input-hidden {
    position: absolute;
    left: -9999px
}

input[type=radio]:checked+label>img {
    animation: levitate 0.5s ease-in-out infinite;
    transform: scale(2.0)
}

input[type=radio]+label>img {
    transition: 500ms all
}

.modal-footer {
    background-color: rgb(238, 238, 238)
}

@media (max-width: 400px) {
    img {
        width: auto;
        height: auto
    }
}