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 supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Bootstrap4 02

Card Bootstrap4 02

Header with background animate 01

Header with background animate 01

Input file style01

Input file style01

Loading Style snake

Loading Style snake

Pagination with Jquery

Pagination with Jquery

Scroll down button 01

Scroll down button 01

Timeline style04

Timeline style04

Timeline style05

Timeline style05

Timeline style08

Timeline style08

toggle switch style01

toggle switch style01