<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="kudos-wrap"> <ul> <li><input type="checkbox" id="cb1" /> <label for="cb1"><img src="http://lorempixel.com/100/100" /></label> </li> <li><input type="checkbox" id="cb2" /> <label for="cb2"><img src="http://lorempixel.com/101/101" /></label> </li> <li><input type="checkbox" id="cb3" /> <label for="cb3"><img src="http://lorempixel.com/102/102" /></label> </li> <li><input type="checkbox" id="cb4" /> <label for="cb4"><img src="http://lorempixel.com/103/103" /></label> </li> </ul> </div> </div> </div>

.kudos-wrap { background-color: #232323; margin-bottom: 30px; padding:25px 15px; box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.2), inset 0 0px 0px 0 rgba(0,0,0,0.19); } .kudos-wrap ul { list-style-type: none; } .kudos-wrap li { display: inline-block; } .kudos-wrap input[type="checkbox"][id^="cb"] { display: none; } .kudos-wrap label { border: 1px solid #2196F3; padding: 10px; display: block; position: relative; margin: 10px; cursor: pointer; } .kudos-wrap label:before { background-color: white; color: white; content: " "; display: block; border-radius: 50%; position: absolute; top: -10px; left: -10px; width: 25px; height: 25px; text-align: center; line-height: 28px; transition-duration: 0.4s; transform: scale(0); } .kudos-wrap label img { height: 100px; width: 100px; transition-duration: 0.2s; transform-origin: 50% 50%; } .kudos-wrap :checked + label { border-color: #673AB7; } .kudos-wrap :checked + label:before { content: "✓"; font-size: 15px; font-weight: bold; background-color: #673AB7; transform: scale(1); } .kudos-wrap :checked + label img { transform: scale(0.9); box-shadow: 0 0 5px #333; z-index: -1; }