title: transform image in a bootstrap card
body: <p>here is my problem, I have successfully encoded my bootstrap cards as I wish, but a small details grieves me.</p>
  
  <p>I would like to make sure that the buttons 'infos' and 'mods' are not taken into account by "transform scale"</p>
  
  <p>Only I can scratch my head and try all sorts of things I can not get out of this pass.</p>
  
  <p>Here is the CSS &amp; HTML code.</p>
  
  <pre><code> &lt;div class="card-deck row"&gt;
  
  &lt;div class="col-3"&gt;&lt;!--event serv--&gt;
    &lt;div class="card"&gt;
      &lt;div class="card bg-inverse"&gt;
       &lt;div class="card-block card-inverse event serv"&gt;
       &lt;h5&gt;Special event&lt;/h5&gt;&lt;p class="lead"&gt;PVP / PVE&lt;/p&gt;
       &lt;a href="#" class="btn btn-sm btn-secondary"&gt;Infos&lt;/a&gt;
       &lt;a href="#" class="btn btn-sm btn-primary"&gt;Mods&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!--/event serv--&gt;
  
   &lt;div class="col-6"&gt;&lt;!--island serv--&gt;
    &lt;div class="card"&gt;
      &lt;div class="card bg-inverse"&gt;
  
       &lt;div class="card-block card-inverse island serv"&gt;
       &lt;h5&gt;The island&lt;/h5&gt;&lt;p class="lead"&gt;PVE x 3&lt;/p&gt;
       &lt;a href="#" class="btn btn-sm btn-secondary"&gt;Infos&lt;/a&gt;
       &lt;a href="#" class="btn btn-sm btn-primary"&gt;Mods&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;&lt;!--/island serv--&gt;
  
   &lt;div class="col-3"&gt;&lt;!--scorched serv--&gt;
    &lt;div class="card"&gt;
      &lt;div class="card bg-inverse"&gt;
       &lt;div class="card-block card-inverse scorched serv"&gt;
       &lt;h5&gt;Scorched earth&lt;/h5&gt;&lt;p class="lead"&gt;PVE x 3&lt;/p&gt;
       &lt;a href="#" class="btn btn-sm btn-secondary"&gt;Infos&lt;/a&gt;
       &lt;a href="#" class="btn btn-sm btn-primary"&gt;Mods&lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;                                
  &lt;/div&gt;&lt;!--/scorched serv--&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.event{background-image: url(https://images2.alphacoders.com/819/819763.jpg);background-size:cover;background-position: center;}
  
      .island{
      background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
      background-size:cover;
      background-position: center;
      }
  
      .scorched{
      background-image: url(https://images4.alphacoders.com/819/819770.jpg);
      background-size:cover;
      background-position: center;}
  
      .card{overflow:hidden;}
  
      .serv{position:relative;}
  
      .serv:hover{transform:scale(1.1);transition:all 0.7s;}
  </code></pre>
  
  <p>Someone know where my problem comes from? thank you very much !</p>