CSS transition not working properly (resize image)

Question

I have a problem creating a transition in CSS3. I have a div block, that has an image shaped in circle with CSS, and underneath some text. I have managed to do that whenever I hover a block, circle and image resize, but I cannot manage to do what I want. I want to do it the way that only circle scales but image stays the same size. Can you please help me. I would be very grateful.

My HTML code

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="Slike/night.jpg"></div></div>
  </div>

Vsebina is used instead of section

storitve is a block

okrogel is a round div block that has image in it

And my CSS code looks like (I have used grey background for now just to see where they are standing)

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height:100%;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
}

Answer 1

Add this to your css.

The hover is forcing the image to transform.

So force it to transform again to the original resolution using this:

.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}

You can tweak the 0.80 until you get the result you want.

.storitve {
    width:30.3%;
    margin:1.5%;
    height:400px;
    background:grey;
    float:left;
}

.okrogel img {
    max-height: 200px;
    max-width:  200px;
    border-radius:50%;
    display:block;
    position:relative;
}

.storitve:hover .okrogel{
    transform:scale(1.25,1.25);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}
.storitve:hover .okrogel img{
    transform: scale(0.80, 0.80);  !important;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function:ease-in-out !important;
}


.okrogel {
    width:200px;
    height:200px;
    margin:0 auto;
    margin-top:10px;
    background: rgba(0,0,255, 0.7);
}

<div id="Vsebina">
    <div class="storitve"><div class="okrogel"> <img src="http://www.freeiconspng.com/uploads/firefox-logo-icon-15.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Internet_Explorer_9_icon.svg/2000px-Internet_Explorer_9_icon.svg.png"></div></div>
    <div class="storitve"> <div class="okrogel"><img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"></div></div>
  </div>