[Resolved] How Do I Stop HTML From Being Stripped Out

I want a hover image on home page at https://maceducationcanada.com/ so have included the following HTML

<div class="paytostudy"><a target="_blank" href="https://paytostudy.com"><img src="https://maceducationcanada.com/eric-content//uploads/2018/02/paytostudy-min.jpg" /></a></div>

with CSS of
.paytostudy {
background-image: url(“uploads/2018/02/paytostudy-min.jpg”) no-repeat;
display: inline-block;
height: 140px;
width: 513px;
}

.paytostudy:hover {
background-image: url(“uploads/2018/02/paytostudy-hover-min.jpg”) no-repeat;
}

Unfortunately WP keeps stripping out the code. I have tried using and

 tags and have added to my functions.php in the child-theme

// stop wp removing div tags
function ikreativ_tiny_mce_fix( $init )
{
    // html elements being stripped
    $init['extended_valid_elements'] = 'div[*]';

    // pass back to wordpress
    return $init;
}
add_filter('tiny_mce_before_init', 'ikreativ_tiny_mce_fix');

Nothing seems to work.

How do I stop WP from stripping out my code so that my hover image will work?
Thanks!