Image hover style border top

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Image Hover | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="Bootstrap Image Hover">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
   
	<div class="container">
		<div class="row">
	
			<div class="col-lg-4">
				<figure class="snip1281 yellow">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="sample22"/>
				  <figcaption>
					<h2>Gordon Norman</h2><span>Musician</span>
				  </figcaption>
				  <a href="#"></a>
				</figure>
			</div>
	
			<div class="col-lg-4">
				<figure class="snip1281 red">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="sample69"/>
				  <figcaption>
					<h2>Abraham Pigeon</h2><span>Explorer</span>
				  </figcaption>
				  <a href="#"></a>
				</figure>
			</div>
	
			<div class="col-lg-4">
				<figure class="snip1281 blue">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20"/>
				  <figcaption>
					<h2>Bailey Wonger</h2><span>Artist</span>
				  </figcaption>
				  <a href="#"></a>
				</figure>
			</div>
			
			<div class="col-lg-6">
				<figure class="snip1281 blue">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20"/>
				  <figcaption>
					<h2>Bailey Wonger</h2><span>Artist</span>
				  </figcaption>
				  <a href="#"></a>
				</figure>
			</div>
			
			<div class="col-lg-6">
				<figure class="snip1281 blue">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample20.jpg" alt="sample20"/>
				  <figcaption>
					<h2>Bailey Wonger</h2><span>Artist</span>
				  </figcaption>
				  <a href="#"></a>
				</figure>
			</div>
	
		</div>
	</div>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
} 

body {
    background-color: #fafafa;  
}

figure.snip1281 {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  /*min-width: 230px;
  max-width: 315px;
  max-height: 220px;*/
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
}
figure.snip1281 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1281 img {
  opacity: 0.7;
  /*max-width: 100%;*/
}
figure.snip1281:after {
  background: #000000;
  width: 0;
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1281 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0 30px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
figure.snip1281 h2,
figure.snip1281 span {
  margin: 0;
  width: 100%;
}
figure.snip1281 h2 {
  font-weight: 400;
  text-transform: uppercase;
}
figure.snip1281 span {
  color: #e6e6e6;
  font-weight: 700;
  text-transform: uppercase;
}
figure.snip1281 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1281.blue:after {
  background-color: #2980b9;
}
figure.snip1281.blue span {
  color: #409ad5;
}
figure.snip1281.red:after {
  background-color: #c0392b;
}
figure.snip1281.red span {
  color: #d65548;
}
figure.snip1281.yellow:after {
  background-color: #f39c12;
}
figure.snip1281.yellow span {
  color: #f5b043;
}
figure.snip1281.green:after {
  background-color: #27ae60;
}
figure.snip1281.green span {
  color: #36d278;
}
figure.snip1281:hover img,
figure.snip1281.hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure.snip1281:hover:after,
figure.snip1281.hover:after {
  width: 100%;
}
/* Demo purposes only */
body {
  background-color: #212121;
}

.snip1281 img {
width: 100%;
height: 300px;
}
$(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );