<div class="logoBox bobcat"><a href="https://www.bobcatpartsonline.com/#/catalogBrowser" target="_blank"><div class="ari-logo-alignment"><img alt="Bobcat" title="Bobcat" src="//cdnmedia.endeavorsuite.com/images/ThumbGenerator/Thumb.aspx?img=//cdnmedia.endeavorsuite.com/images/organizations/7c0ed171-b4e2-4174-bff7-e6203ca0f884/bobcat-logo.png&v=1669174702988&mw=400&mh=135&f=1" class="fr-fic fr-dii"></div><p title="Bobcat">Bobcat</p></a>
</div>

<style>
	.logoBox{
    background: #fff;
    position: relative;
    height: 215px;
    min-width: 175px;
    overflow: hidden;
    width: 175px;
    border: 1px solid #ccc !important;
    padding: 1em !important;
    margin: 0.5em !important;
    line-height: 10em !important;
    font-weight: bold !important;
    text-align: center;
    cursor: pointer;
    opacity: 0;
}
#ari_brands .logoBox {
	opacity: 1;
}
.logoBox:hover{
    border: 1px solid #bbb;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    transition: all 500ms ease;
}
.logoBox .ari-logo-alignment {
    position: relative;
    top: 35%;
    transform: perspective(1px) translateY(-50%);
}
.logoBox p{
    position: absolute;
    left: 0; 
    bottom: 0;
    line-height: normal !important;
    color: #000;
    background: #eee;
    border-top: 1px solid #bbb !important;
    padding: 0.5em 0 !important;
    width: 100%;
    font-size: .85em !important;
    height: 40px;
    overflow: hidden;
}
</style>

// Script
$('#ari_brands').append($('.logoBox.bobcat')).append($('.logoBox.branson'));