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>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
}
}