How to style an image when hovering over a link?

Question

css

The link overlaps the entire .item block, how to make it so that, when hovering over it, the picture implements its zoom effect?

<div class="item">
  <div class="img">
    <img src="http://ххх/1.png" alt="" class="imege">
  </div>
  <h4>заголовок</h4>
  <p>описание</p>
  <a href="#" target="blank_" class="link"></a>
</div>

.item {
    position: relative;	
}
.img {
  display: inline-block;
  overflow:hidden;
}
.img img {
  display: block;
  filter: grayscale(1);
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}
.img img:hover {
  filter: none;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.link {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;	
}