Transform Scale on hover not scaling

问题

I want the .servNavItemWrap img to transform scale when servNavItemWrap is being hovered. What I am doing now it not working.

Does anyone see what I am doing wrong?

.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 .servNavItemWrap img {
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="servNavItemWrap">
  <a href="#">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Dog-bite-prevention.jpg?itok=3N2KTNkP" alt="dog">
  </a>
</div>

回答1:

You are using wrong selector...Use .servNavItemWrap:hover img

.servNavItemWrap:hover .servNavItemWrap img....it will target the img which is inside .servNavItemWrap .servNavItemWrap

.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);
}

<div class="servNavItemWrap">
  <a href="#">
    <img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Dog-bite-prevention.jpg?itok=3N2KTNkP" alt="dog">
  </a>
</div>

来源：https://stackoverflow.com/questions/49411142/transform-scale-on-hover-not-scaling

标签

css

css-transitions

transform