why image is applied in zoom using background image in css code example

Example 1: zoom background image css

/*
Or this one can be used
*/
.prod_img {
  -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;
  position: relative;
}

.prod_img:before {
  content: ' ';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  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;
  "

}

.protransparentbg {
  position: absolute;
  left: 20px;
  background: rgba(51, 51, 51, .8);
}

.prod_img:hover:before {
  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;
}

Example 2: zoom background image css

/*Rather than an <img>, I used an additional <div> inside the parent to act as the image. The structure being:*/

<div class="parent">
  <div class="child"></div>
</div>
/*First we specify the dimensions for the parent element. Then the child can fill the parent using width: 100% and height: 100%;, as well as set the background image, ensuring it scales to cover the area.*/

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}
/*We then add hover effects to our parent element which will affect our child element. A focus style is good for accessibility as well:*/

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}
/*You may want to use a tool for adding prefixes for the best possible browser support.

To finish up the basic effect, we can add some transitions to our child element’s normal state:
*/
transition: all .5s;
/*If you want to add a color overlay, you can make use of pseudo elements like ::before:
*/
.child::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}

.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}
/*Now when we hover on the parent element, the child element should show a color overlay!

Finally, we’ll cover how to add some text to show on our overlay. We can add an element to our current child element like so:
*/
<div class="parent">
   <div class="child">
      <span>Hello</span>
   </div>
</div>
We can give our <span> some style:

span {
  color: white; /* Good thing we set a fallback color! */
  font-family: sans-serif;
  padding: 25%;
  position: absolute;
}
/*and we can make it visible only when we hover on the .parent:
*/
.parent:hover span,
.parent:focus span {
  display: block;
}
/*For more in depth go to source*/