CSS transition not working properly (resize image) - html

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>