图像悬停不起作用 css3

Question

问题是当我将鼠标悬停在图像上时没有任何反应。我在我的其他网站上使用了类比代码，一切正常。我不知道是什么问题

这是我的CSS:

   .gallery {
     padding-left: 10px;
   }
   .gallery img {
     width: 300px;
     height: 205px;
     float: left;
     margin: 10px 10px;
   }
 }
 .gallery img:hover {
   transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   -moz-transform: scale(1.2, 1.2);
   -o-transform: scale(1.2, 1.2);
   -ms-transform: scale(1.2, 1.2);
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
 }

<div class="gallery">
  <a target="_blank" href="#">
    <img src="images/auto2.png" alt="">
  </a>
</div>

Answer 1

你有一个额外的括号

.gallery {
  width: 300px;
  height: 205px;
  margin: 10px 10px;
  border: 1px solid red;
  overflow: hidden; /* so that the image hide when hovered */
}
.gallery a {
  display: block; /* set a to display block */
}
.gallery img {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.gallery:hover img {
  transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
}

<div class="gallery">
  <a target="_blank" href="#">
    <img src="http://placeimg.com/300/205/any" alt="" />
  </a>
</div>