image hover doesnt work css3 - image

Question

the problem is when i hover over images nothing happens. i used analogic code on my other site and everything worked fine. i have no idea whats the issue
this is my 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

you have one extra bracket }
.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>