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");
    }
  );
Vidéo background en html5 style02

Vidéo background en html5 style02

Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style06

Timeline style06

Timeline style01

Timeline style01

Social Media Icons

Social Media Icons

Page 404 exemple 01

Page 404 exemple 01

Input range slider HTML style03

Input range slider HTML style03

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Dropdown right aligned B4

Dropdown right aligned B4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Arrows Defense Game

Arrows Defense Game

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table