/jsbin.yesihapi.css

## jsbin.yesihapi.css
body {
  background: #FFFFFF;
}

.box {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 150px auto;
  border: 1px solid;
  border-radius: 3px;
  border-color: #188160;
  background: #188160;
}

h1 {
  font-family: Arial;
  font-weight: 400;
  color: #F8F8F8;
  margin: 12px;
  padding: 0;
}

.caret {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #188160;
  border-left: 0px solid transparent;
  position: absolute;
  top: calc(50% - 8px);
  left: -9px;
  z-index: -1;

  transition-property: top, left, -webkit-transform;
  transition-duration: 0.33s;
  transition-timing-function: linear;
}

.caret-moving {
  top: 57px;
  left: calc(50% - 4px);
  -webkit-transform: rotate(-90deg);
}

## jsbin.yesihapi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <h1>33</h1>
    <div class="caret"></div>
  </div>
</body>
</html>

## jsbin.yesihapi.js
$(document).on('ready', function() {
  $('.box').hover(
    function(event) {
      $('.caret').addClass('caret-moving');
    },
    function(event) {
      $('.caret').removeClass('caret-moving');
    }
  );
});
	body {
	background: #FFFFFF;
	}

	.box {
	position: relative;
	width: 60px;
	height: 60px;
	margin: 150px auto;
	border: 1px solid;
	border-radius: 3px;
	border-color: #188160;
	background: #188160;
	}

	h1 {
	font-family: Arial;
	font-weight: 400;
	color: #F8F8F8;
	margin: 12px;
	padding: 0;
	}

	.caret {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #188160;
	border-left: 0px solid transparent;
	position: absolute;
	top: calc(50% - 8px);
	left: -9px;
	z-index: -1;

	transition-property: top, left, -webkit-transform;
	transition-duration: 0.33s;
	transition-timing-function: linear;
	}

	.caret-moving {
	top: 57px;
	left: calc(50% - 4px);
	-webkit-transform: rotate(-90deg);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="box">
	<h1>33</h1>
	<div class="caret"></div>
	</div>
	</body>
	</html>
	$(document).on('ready', function() {
	$('.box').hover(
	function(event) {
	$('.caret').addClass('caret-moving');
	},
	function(event) {
	$('.caret').removeClass('caret-moving');
	}
	);
	});