JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="plane1" class="plane col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
     <h4 class="center">That plane</h4>

</div>
<div id="plane" class="plane col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
     <h4 class="center">That other plane</h4>

</div>

CSS

.plane {
    min-height: 80px;
    background: #ccc;
    transition: all 0.4s;
}

JavaScript

$('.plane').hover(function () {
    $(this).siblings().css({
        transform: 'scale(0.9)',
        opacity: '0.2'
    });
}, function () {
    $(this).siblings().css({
        transform: 'scale(1)',
        opacity: '1'
    });
});