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!