Image hover 04

<!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="snip1428">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image One</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		<div class="col-lg-4 col-12">	
			<figure class="snip1428">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image Two</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		<div class="col-lg-4 col-12">	
			<figure class="snip1428 hover">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image Four</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		<div class="col-lg-4 col-12">	
			<figure class="snip1428">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image Five</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		<div class="col-lg-4 col-12">	
			<figure class="snip1428">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image Sex</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		<div class="col-lg-4 col-12">	
			<figure class="snip1428">
				<img src="https://source.unsplash.com/random/" alt="sample69" />
				<figcaption>
				  <h3>Image Sex</h3>
				  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit, voluptatem corporis.</p>
				</figcaption><i class="ion-ios-home-outline"></i>
				<a href="#"></a>
			</figure>
		</div>
		</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=Playfair+Display:400,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
body{background: blueviolet}
figure.snip1428 {
  font-family: 'Playfair Display', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  color: #000000;
  text-align: left;
  font-size: 16px;
  background-color: #000000;
}
figure.snip1428 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1428 img {
  max-width: 100%;
  backface-visibility: hidden;
}
figure.snip1428 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  padding: 30px 10px 30px 0;
  background-color: #ffffff;
  width: 40%;
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}
figure.snip1428 figcaption:before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 100%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 0 120px 120px;
  border-color: transparent transparent transparent #ffffff;
}
figure.snip1428:after {
  position: absolute;
  top: 50%;
  left: 40%;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 120px 120px;
  border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1428 h3,
figure.snip1428 p {
  line-height: 1.5em;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  margin: 0;
}
figure.snip1428 h3 {
  margin: 0 0 5px;
  line-height: 1.1em;
  font-weight: 900;
  font-size: 1.4em;
  opacity: 0.75;
}
figure.snip1428 p {
  font-size: 0.8em;
}
figure.snip1428 i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 25px 35px;
  font-size: 44px;
  color: #ffffff;
  opacity: 0;
}
figure.snip1428 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
figure.snip1428:hover img,
figure.snip1428.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figure.snip1428:hover:after,
figure.snip1428.hover:after,
figure.snip1428:hover figcaption,
figure.snip1428.hover figcaption,
figure.snip1428:hover i,
figure.snip1428.hover i {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Pagination with Jquery

Pagination with Jquery

Manual Slideshow

Manual Slideshow

Loading style water animation

Loading style water animation

Loading Style snake

Loading Style snake

Image hover Flip Flap Style

Image hover Flip Flap Style

Form login b4 01

Form login b4 01

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau