<div class="container">
<!-- Button trigger modal -->
<div class="row my-btn">
<div class="col text-center "> <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#modelId">Launch Modal</button> </div>
</div> <!-- Modal -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<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 type="radio" name="emotion" id="sad" class="input-hidden" /><img src="https://img.icons8.com/color/100/000000/boring.png" width="84" height="84"></label></div>
<div class="col-auto example-block text-center"> <label class="radio-inline"> <input type="radio" name="emotion" id="happy" class="input-hidden" /> <img src="https://img.icons8.com/color/100/000000/bored.png" width="84" height="84"> </label> </div>
<div class="col-auto example-block text-center"> <label class="radio-inline"> <input type="radio" name="emotion" id="exicetd" class="input-hidden" /> <img src="https://img.icons8.com/color/100/000000/smiling.png " width="84" height="84"> </label> </div>
</div>
</div>
<div class="modal-footer justify-content-between">
<div class="custom-control custom-checkbox checkbox-lg space"><input type="checkbox" class="custom-control-input" id="checkbox-2"><label class="custom-control-label" for="checkbox-2">Dont' show this again</label> </div> <button type="button" class="btn btn-primary" data-dismiss="modal">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
}
}