Hi jordan,
Please refer below code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.cat1
{
background-color: #D02281;
}
.cat1, .cat2
{
text-align: center;
padding: 60px 6px;
margin: 10px 12px;
font-family: 'Courgette';
background-repeat: no-repeat;
z-index: 999;
color: #fff;
text-transform: capitalize;
font-size: 20px;
transition: ease 0.5s;
-webkit-transition: ease 0.5s;
-o-transition: ease 0.5s;
-moz-transition: ease 0.5s;
}
.cat2
{
background-color: #00B3CA;
}
.cat1:before, .cat2:before
{
content: " ";
height: 80%;
width: 88%;
border: solid 1px;
position: absolute;
top: 16px;
left: 23px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('.cat1,.cat2').mouseover(function () {
$(this).attr('style', 'background-color:black');
});
$('.cat1,.cat2').mouseout(function () {
if ($(this)[0].className == 'cat1') {
$(this).attr('style', 'background-color:#D02281');
}
else {
$(this).attr('style', 'background-color:#00B3CA');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="contain">
<div id="ctl00_ContentPlaceHolder1_divCatBox" class="container">
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/CAP/PARTYWEAR.aspx">
<div class="cat1">
PARTYWEAR</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/CROP-TOP/13-PARTY-WEAR.aspx">
<div class="cat1">
PARTY WEAR</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/BLOUZE/PARTY-WEAR.aspx">
<div class="cat1">
PARTY WEAR</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/SAREE/DESIGNER-SAREE.aspx">
<div class="cat2">
DESIGNER SAREE</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/BLOUZE/CASUAL-WEAR.aspx">
<div class="cat2">
CASUAL WEAR</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="http://pearlboutique.in/cat/SAREE/Wedding-Sarees.aspx">
<div class="cat2">
Wedding Sarees</div>
</a>
</div>
</div>
</div>
</form>
</body>
</html>
Demo
