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");
    }
  );
  
Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Card Profile Style01

Card Profile Style01

Cards box with title

Cards box with title

Form login et créer un compte style01

Form login et créer un compte style01

Header Aside Footer Admin

Header Aside Footer Admin

Image hover 04

Image hover 04

Image hover 05

Image hover 05

Image hover 07

Image hover 07

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Timeline style02

Timeline style02

Timeline style06

Timeline style06

bootstrap4 tabs

bootstrap4 tabs