Rollover эффект для изображения

Для создания анимации изображения посредством html, а точнее обычной смены картинок одну на другую при наведении курсора), нам понадобится две картинки. Это еще называется Rollover эффектом. Создавать его будет с помощью команды onMouseOver. Вот как это выглядит (наведите мышку на картинку)
Где это может пригодится?
Rollover эффект идеально подойдет для создания кнопок. По такой кнопке так и хочется кликнуть! Как вариант, можно сделать такую кнопку для подписки на рассылку, feedburner или для кнопок социальных сетей.
html код Rollover эффекта для изображения:

<a href="url страницы, на которую ведет кнопка"><img src="URL первого кадра / первого изображения" onmouseover="this.src='URL второго кадра / второго изображения'" onmouseout=" this.src='URL первого кадра / первого изображения'" /></a>

Рассмотрим на примере:
У нас есть 2 исходных изображения:

https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-1.png

https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-2.png

Нужно сделать смену изображений при помощи команды onMouseOver.
Подставляем ссылки на изображения в html код Rollover и получаем:

<a href=https://blogger.com/><img src="https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-1.png" onmouseover="this.src='https://mycrib.ru/wp-content/uploads/2018/10/rollover-image-2.png" onmouseout=" this.src=' https://3.bp.blogspot.com/-_c_xwPEtPBQ/T_M5s2-LAJI/AAAAAAAAHT4/Jh7jdOBl2bs/s1600/rollover-image-1.pn" /></a>