<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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"> <a href="#" class="btn hover col-md-2"> <div > <div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://dev.cybercat.ca/commonwealth/images/1000568_230x230.jpg"> <div class="card-body"> <p class="card-text">Bandes de chant en ABS / PVC</p> </div> </div> </div> </a> <a href="#" class="btn hover col-md-2"> <div > <div class="card mb-2 box-shadow"> <img class="card-img-top" src="http://dev.cybercat.ca/commonwealth/images/1000006_230x230.jpg"> <div class="card-body"> <p class="card-text">Mélamine Tafisa</p> </div> </div> </div> </a> </div> </div>

.box-shadow { box-shadow: 4px 5px 5px 0px rgba(46,61,73,0.15); border: 1px solid #ccc; transition: all 0.2s ease; } .box-shadow:hover { box-shadow: 0px 0px 5px 0px rgba(216,30,5,1); } .card-body { background:#fff; color:#000; transition: all 0.2s ease; } .box-shadow:hover .card-body { background:#eee; }