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");
  }
);
SwiperJS style01

SwiperJS style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Nav Menu style01

Nav Menu style01

Input range slider HTML style04

Input range slider HTML style04

Image hover 01

Image hover 01

Form login 03

Form login 03

Chercher un mot sur la liste

Chercher un mot sur la liste

Card Bootstrap4 02

Card Bootstrap4 02

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Background div gradient

Background div gradient

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table