Как менять картинку при наведении курсора мыши

Думаю вы часто встречали на различных сайтах(в частности на моем) что при наведении курсора мыши на картинку, она меняется. Так вот в этой статье я расскажу вам как сделать смену картинки при наведении на нее курсора мыши. По сути вариантов может быть много будь то смена цвета у картинки либо затемнение или же наоборот, смена прозрачности и так далее.


Для начала нам нужен HTML код где все действие и будет происходить:

.smena{

  background: url("img_1.jpg") no-repeat; // Подставляем картинку по умолчанию

  height: 100px; // Высота картинки

  width: 100px; // Ширина картинки

}

.smena:hover {

  background: url("img_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши

  border: 2px solid green; // Устанавливаем зеленую рамку

  height: 120px; // Высота новой картинки

  width: 120px; // Ширина новой картинки

}