title: Zoom background image only
body: <p>I want to zoom the background image only</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.prod_img:hover {
    webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    -ms-transform: scale(1.04);
    transform: scale(1.04);
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
  }
  
  .prod_img {
    content: ' ';
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    height: 580px;
    width: 300px;
  }
  
  .protransparentbg {
    position: absolute;
    background: rgba(51, 51, 51, .8);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;&lt;div id="prod_main"&gt;
    &lt;div id="product_content"&gt;
  
      &lt;li class="prod_img prod_img1" id="prod_img1" style="background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);background-size: cover;background-position: center center;"&gt;
        &lt;div class="protransparentbg"&gt;
          &lt;h4 class=""&gt;FIBER FLOOR MAT&lt;/h4&gt;
        &lt;/div&gt;
      &lt;/li&gt;
  
  
  
    &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is my code but in this zoom effect works for the background image and also it effect the content in the image.how to give the effect only to the background image.</p>