Hover effecting other elements other than the item being hovered - html

Question

I am having a hover issue. Whenever I hover over a specific .servNavItemTitle the font weight for the other .servNavItemTitle decreases for a moment and then goes back to normal quickly.
To see it in the demo, just hover over one of the titles and watch the other titles as the font-weight reduces.
Does anyone see what the issue is?
Here is a jsfiddle demo
Here is a narrowed down version of the code:
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;
transition: all 0.25s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
<div id="serviceNavBlock2" class="iblock">
<div class="servNavItemWrap">
<a href="http://localhost:8080/profile.php">
<img src="" alt="Aluminum Profile">
<span class="servNavItemTitle hGc block">Aluminum</span>
</a>
</div>
<div class="servNavItemWrap">
<a href="#">
<img src="" alt="Aluminum Components">
<span class="servNavItemTitle hGc block">Components</span>
</a>
</div>

Answer 1

After Temani narrowed down the issue, I searched and found the answer here: css transform element affects other element which use transform:scale(0.5) in android webview . Basically, I added -webkit-backface-visibility: hidden; to the scaled image and it works perfectly now.