Card Bootstrap 4 + view hover hm-zoom on image

Hello guys !

first, i use BS4 beta + rails 5 + MDB free

here, I have a problem at the level of my cards. I use the BS4 class but I would like to add the mask and the transform scale transition. only, impossible to do it with BS4 base class, or else I'm stuck somewhere .. I want to use the class BS4 by default for the card by that using the way "image hover hm-zoom with the mask" the div in col-12 and too high while the cards are the same size. Here is the code of one of my cards:

Start your code here 

<div class="container">
 <div class="row">
 <div class="col-lg-4 mb-4">
 <div class="card card-body" style="background:url(http://gameactu.eu/wp-content/uploads/2017/08/1497293801_Steam-ARK-Key-Art.jpg)center;background-size:cover">
 <p>
 <span class="badge badge-success"><strong>PVE</strong></span>
 <span class="badge badge-danger"><strong>PVP</strong></span>
 <p>
 <h4 class="card-title h4-responsive text-white">The island</h4>
 <p><%= link_to 'Rejoindre', '#', class: 'btn-sm btn btn-success font-weight-bold', title:'Rejoindre le serveur'%></p>
 </div>
 <div class="btn-group w-100" style="margin-top:-2px">
 <%= link_to '', '#', class: 'btn-block btn-sm btn btn-info fa fa-info', title:'Infos serveur'%>
 <%= link_to '', '#', class: 'btn-block btn-sm btn btn-dark fa-2x fa fa-steam', title:'Collection des mods'%>
 </div>
 </div>
 </div>
 </div>