Как с помощью CSS изменить картинку при наведении курсора

Как добиться смены картинки при наведении? Это можно реализовать с помощью css.

Готовый пример:

Объяснения. Как мы сделали, чтобы картинка менялась при наведении? Мы в html код сразу добавили две картинки, но одну скрыли с помощью :nth-of-type(2). Затем при наведении (hover) на родительский элемент, мы первую картинку скрываем (display: none), а вторую наоборот показываем, задавая ей display: block;