JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table_row12">
<div class="item3">
<ul class="myul2">
	<li class="row_img"><img alt="" src="http://192.254.187.152/~jhanan/julie_dev/image/data/Build-Your-Invite/Main Images/step2.jpg" /></li>
	<li class="row_name">
	<div class="row_name_i">FLAT PANEL INVITATION<br />
        no accent layers
        <div class="row_name_hidden" style="display:none;">INCLUDES</div>
        </div>
	<div class="row_name_i_b">
	<div class="row_name_i_b_info"><span>Starting at</span><br />
	<strong>$2.75 / each</strong></div>
	</div>
	</li>
</ul>
</div>
</div>

CSS

.row_name_i:hover {position:relative; margin-top:-161px; height:218px; background:gray;}
.myul {text-align:center; list-style:none; padding:0px;}
  .myul2 {text-align:center; list-style:none; padding:0px;}
  .myul2 .row_name {cursor:default;}
  .active { color:white; background:gray !important; }
  .table_row12 > div { display: inline-block; font-family: 'Oswald', sans-serif; vertical-align: top; text-align:center !important;}
  div.item3 {width: 181px; height: 255px; margin-bottom:50px;}
  .category-info {padding:0px !important; }
  .row_name_i { background:silver; padding:15px 0px 15px 0px; color:white; font-weight:300;}
  .row_name_i_b { border:1px solid black; }
  .row_name_i_b_info { text-align:left; margin-left:15px; }
  .row_name_i_b_info span { font-size:xx-small; }

JavaScript

$("myul2").hover(
  function () {
    $('.row_name_hidden').attr("style", '');
  },
  function () {
    $('.row_name_hidden').attr("style", 'display:none;');
  }
);