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");
  }
);
input radio checkbox b4 style

input radio checkbox b4 style

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Tablet style code texte

Tablet style code texte

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Organization Chart

Organization Chart

Loading style book loader

Loading style book loader

Input range slider HTML style03

Input range slider HTML style03

Elastic Content Slider

Elastic Content Slider

Drag and drop or upload input file

Drag and drop or upload input file

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Blog post card 01

Blog post card 01

Ajouter une pagination1

Ajouter une pagination1