JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="home-row">
    <li class="home-box orange-box tweet">
        <a class="box-link" href="#">
            <img class="background" src="http://placehold.it/320x191" alt="Home Image" />
            <span class="tab">Section</span>
            <div class="content">
                <h3>
                    <span class="highlight">Text line 1</span>
                    <span>Text line 2</span>
                </h3>
            </div>
            <div class="extra">
                <span class="arrow"></span>
                <span class="icon"></span>
                <h4>This is extra content</h4>
                <p>Appears when you hover over the box</p>
            </div>
        </a>
    </li>
    <li class="home-box orange-box tweet">
        <a class="box-link" href="#">
            <img class="background" src="http://placehold.it/320x191" alt="Home Image" />
            <span class="tab">Section</span>
            <div class="content">
                <h3>
                    <span class="highlight">Text line 1</span>
                    <span>Text line 2</span>
                </h3>
            </div>
            <div class="extra">
                <span class="arrow"></span>
                <span class="icon"></span>
                <h4>This is extra content</h4>
                <p>Appears when you hover over the box</p>
            </div>
        </a>
    </li>
    <li class="home-box orange-box tweet">
        <a class="box-link" href="#">
            <img class="background" src="http://placehold.it/320x191" alt="Home Image" />
            <span class="tab">Section</span>
            <div class="content">
                <h3>
                    <span class="highlight">Text line 1</span>
                    <span>Text line 2</span>
                </h3>
            </div>
            <div class="extra">
                <span class="arrow"></span>
                <span class="icon"></span>
                <h4>This is extra content</h4>
               ...

CSS

a {text-decoration: none;}
ul.home-row {
        clear: both;
        overflow:hidden;
        padding: 0 0 18px 0;
}
        ul.home-row li {
                position: relative;
                float: left;
                height: 190px;
                width: 320px;
                overflow: hidden;
}
                        
        ul.home-row li:nth-child(2n+2) {background: #666666;}
        ul.home-row li:nth-child(2n+1) {background: #999;}
                ul.home-row li a.box-link {display: block;position: absolute;top:0;bottom:0;left:0;right:0;}
                
                ul.home-row li a.cta,
                ul.home-row li a.cta:visited,
                ul.home-row li p.cta
                {
                        position: absolute;
                        bottom: 5px;
                        left: 15px;
                        background: url(/images/circle-arrow-white.png) right 6px no-repeat;
                        padding: 5px 34px 5px 0;
                        color: #fff;
                        font-size: 1.4em !important;
                        line-height: normal !important;
                }
                ul.home-row li a.cta:hover,
                ul.home-row li a.cta:focus
                {
                        text-decoration: underline;
                }
                ul.home-row li img.background {
                        position: absolute;
                        z-index: 1;
                        /*visibility: hidden;*/
                }
                    /*.box-grad {*/
                    /*    position: absolute;*/
                    /*    z-index: 2;*/
                    /*    bottom: 0;*/
                    /*    width: 400px;*/
                    /*}*/
                ul.home-row li span.tab {
                        z-index: 4;
                        right: 15px;
                        left: auto;
                        background: #013372;
                        color: #fff;
                }

      ...

JavaScript

//Homepage hover content
  $('.extra').each(function() {
    var _this = $(this);
    _this.css('bottom', -110);
    _this.closest('li').hover(function() {
      $(this).stop().animate({'opacity':1}, 400);
      _this.animate({'bottom':0}, {'queue':false, 'duration':400});
      //$('ul.home-row li').not($(this)).not('.content ul li').stop().animate({'opacity':.3}, 400);
    });
  });
  $('.home-row li.home-box').hover(function() {
    $('ul.home-row li.home-box').not($(this)).not('.content ul li').stop().animate({'opacity':.3}, 400);
  })
  $('.home-row li.home-box').mouseleave(function(e) {
    $('.home-row > li').stop().animate({'opacity':1}, 400).find('.extra').animate({'bottom':-110}, {'queue':false, 'duration':400});
  });