CSS

div {
    background: url('https://placeholdit.co//i/100x100');
}

div:hover {
    background: url('https://placeholdit.co//i/100x100?bg=111111');
}

Javascript

function hover(element) {
    element.setAttribute('src', 'https://placeholdit.co//i/100x100?bg=111111');
}
function unhover(element) {
    element.setAttribute('src', 'https://placeholdit.co//i/100x100');
}

Do I need to modify the theme’s actual header.php file or can I add this to custom css?

I believe that the element is called ‘site-logo’ and is only really mentioned once in the theme .php file.

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" /></a>