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

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Dropdown right aligned B4

Dropdown right aligned B4

Form login b4 01

Form login b4 01

Google Style Login

Google Style Login

SwiperJS style01

SwiperJS style01

Titre section avec une bande style01

Titre section avec une bande style01

Triangle Background css 01

Triangle Background css 01

Vers le haut

Vers le haut

input radio checkbox b4 style

input radio checkbox b4 style