<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"> <ul> <li><input type="radio" id="cb1" name="aw" /> <label for="cb1"><img src="http://lorempixel.com/100/100" /></label> </li> <li><input type="radio" id="cb2" name="aw" /> <label for="cb2"><img src="http://lorempixel.com/101/101" /></label> </li> <li><input type="radio" id="cb4" name="aw" /> <label for="cb4"><img src="http://lorempixel.com/103/103" /></label> </li> </ul> </div> </div>

ul { list-style-type: none; } li { display: inline-block; } input[type="radio"][id^="cb"] { display: none; } label { border: 1px solid #fff; padding: 10px; border-radius: 50%; display: block; position: relative; margin: 10px; cursor: pointer; } label:before { background-color: rgba(16, 65, 99, 0.32 ); text-align:center; color: white; content: " "; display: block; border-radius: 50%; /* border: 1px solid grey; */ position: absolute; top:10px; left: 10px; z-index:1; width: 100px; height: 100px; text-align: center; line-height: 100px; transition-duration: 0.4s; transform: scale(0); } label img { height: 100px; width: 100px; transition-duration: 0.1s; transform-origin: 50% 50%; border-radius: 50%; } :checked + label { border-color: #eee; } :checked + label:before { content: "✓"; transform: scale(1.1); } :checked + label img { transform: scale(1.2); box-shadow: 0 0 3px #333; z-index: -1; }