Image hover 02

<!DOCTYPE html>
<html>
<head>
	<title>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="Image hover effects style">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="noindex,nofollow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body class="container">
	<div class="row mt-5 mb-5">
		<div class=" col-lg-4 col-12">	
		<figure class="snip1361">
			<img src="https://source.unsplash.com/random/" alt="sample45" />
			<figcaption>
			  <h3>Image One</h3>
			  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
			</figcaption>
			<a href="#"></a>
		  </figure>
		  </div>
		  <div class=" col-lg-4 col-12">	
			<figure class="snip1361">
			  <img src="https://source.unsplash.com/random/" alt="sample77" />
			<figcaption>
			  <h3>Image Two</h3>
			  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
			</figcaption>
			<a href="#"></a>
		   </div>
		   <div class=" col-lg-4 col-12">	
		  <figure class="snip1361">
			  <img src="https://source.unsplash.com/random/" alt="sample99" />
			<figcaption>
			  <h3>Image Three</h3>
			  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis. </p>
			</figcaption>
			<a href="#"></a>
		  </figure>
		  </div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Quattrocento);

body{background: #000;}
.snip1361 {
  font-family: 'Quattrocento', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  height: 250px;
  width: 100%;
  color: #141414;
  text-align: left;
  line-height: 1.4em;
  font-size: 16px;
  border: 1px solid #EEE;
}
.snip1361 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1361 img {
  max-width: 100%;
  vertical-align: top;
}
.snip1361 figcaption {
  position: absolute;
  top: calc(77%);
  width: 100%;
  background-color: #ffffff;
  padding: 15px 25px 65px;
}
.snip1361 figcaption:before {
  position: absolute;
  content: '';
  z-index: 2;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 80px;
  background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
  background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
}
.snip1361 h3,
.snip1361 p {
  margin: 0 0 10px;
}
.snip1361 h3 {
  font-weight: 300;
  font-size: 1.4em;
  line-height: 1.2em;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
}
.snip1361 p {
  font-size: 0.9em;
  letter-spacing: 1px;
  opacity: 0.9;
}
.snip1361 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.snip1361:hover figcaption,
.snip1361.hover figcaption {
  top: 80px;
}
/* Demo purposes only */
$(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );
  
Ajouter multiple input dynamique

Ajouter multiple input dynamique

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Geocoded Locations

Geocoded Locations

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover Inspiration styles

Image hover Inspiration styles

Manual Slideshow

Manual Slideshow

Pagination with Jquery

Pagination with Jquery

Simple Table With UIKIT

Simple Table With UIKIT

toggle switch style01

toggle switch style01