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 une pagination1

Ajouter une pagination1

Background overlay

Background overlay

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Geocoded Locations

Geocoded Locations

Header with background animate 01

Header with background animate 01

Image hover style border top

Image hover style border top

Input range slider HTML style01

Input range slider HTML style01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Transitions Animations SVG Style01

Transitions Animations SVG Style01