Grow effect issue with circle piture - css

Question

i was adding grow effects to rectengular pictures without problem,but when i am adding circle picture (it's png) it grows me rectengular by growing with background color.

.grow {
 display: inline-block;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: -webkit-transform;
 transition-property: transform;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }

 .grow:hover {
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
  transform: scale(1.1);
  }

Answer 1

There is no circle elements. Only rectangle.

You can put the image as background of a div with a big border-radius, for example, or maybe add border-radius directly on your image.

Please show an example if I'm not answering the question.