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>

	<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>

<div class="view view-first">
<div class="view">
     <img src="http://www.css3demos.rusdigi.org/images/hover_effects/1.jpg" />
     <div class="mask">
     <h2>Title</h2>
     <p>Your Text</p>
         <a href="#" class="info">Read More</a>
     </div>
</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_img {cursor:pointer;}
  .myul2 .row_name {cursor:default;}
  .myul li {background:#C0C0C0; line-height:25px; margin-bottom:3px; cursor:pointer;}
  .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.item2 {width: 238px; height: 325px; line-height:35px; margin-top:-12px;}
  div.item3 {width: 181px; height: 255px; margin-bottom:50px;}
  .category-info {padding:0px !important; }
  .myimg {background: url('http://192.254.187.152/~jhanan/julie_dev/image/data/Build-Your-Invite/Main Images/byi.jpg');  display: block; width: 238px; height: 282px; }
  .myimg:hover {background: url('http://192.254.187.152/~jhanan/julie_dev/image/data/Build-Your-Invite/Main Images/byi_b.jpg');}
  .subtopic {background:#E8E8E8; padding:10px 50px 15px 50px; text-align:center; margin:0px 20px 0px 20px; font-family: 'arial', sans-serif;}
  .subtopic strong {font-family: 'Oswald', sans-serif; font-weight:400;}
  .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; }

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url('http://192.254.187.152/~jhanan/julie_dev/image/data/Build-Your-Invite/Main Images/byi.jpg') no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
   ...