Как сделать чтобы при наведении курсора- менялась картинка? - Вопросы по CSS

Вопрос такой- как сделать так, чтобы при наведении на изображение курсора- это изображение менялось?
Но только это изображение должно быть ссылкой.
Как это сделать?

Сделал вот так:

HTML-код очень простой:
<div class="img"></div>

Теперь CSS-код:
.img {
  background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию
  height: 100px; // Высота картинки
  width: 100px; // Ширина картинки
}
.img:hover {
  background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
  border: 2px solid #f00; // Устанавливаем красную рамку
  height: 120px; // Высота новой картинки
  width: 120px; // Ширина новой картинки
}

Но это, исходя из кода- просто изображение, которое меняется при наведении курсора.
А нужно, чтобы это изображение было ссылкой!

Так оберните картинку в ссылку...