Hover effecting other elements other than the item being hovered

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>

Seems to work fine in chrome, what browser do you see the above behaviour in? — Pete, May 22 '18 at 13:37
@TemaniAfif Is there anyway to resolve the issue? I have seen scaling before that didn't effect the text under it. — Paul, May 22 '18 at 13:42

score 2 · Answer 1 · answered May 22 '18 at 13:57

2

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.

answered May 22 '18 at 13:57

Paul

3,348
5
32
76

Here is the forked fiddle with the fix implemented: https://jsfiddle.net/7as2ydgn/ – Chase Ingebritson May 22 '18 at 14:09

Hover effecting other elements other than the item being hovered

1 Answers1