JSFiddle - React, Tailwind, and code Playground

by locally

HTML

<div class='outer'>
<a href='#' class='logo'>

</a>
TEXT
</div>

CSS

.outer {
    position: relative;
    width: 218px;
    height: 218px;
}
.logo {
    background: url(http://multisite.morecambeandwize.com/uk/wp-content/uploads/sites/31/2015/04/cropped-maw-logo.png) no-repeat;
    background-position: center center;
    width: 218px;
    height: 218px;
    display: block;
    background-size: 100%
}
.logo:hover {
    transform:"translateY(-50%)"
}

JavaScript

$(".logo").hover(function () {
    $(this).animate({
        height: "109px",
        width: "109px",
        backgroundSize: "100%",
        marginLeft: "54px",
        marginTop: "0px"
    }, 'slow');
    $(".outer").stop().animate({ backgroundColor: '#000000' }, slow);
});