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");
  }
);
toggle switch style02

toggle switch style02

page scroll progress bar

page scroll progress bar

Vers le haut

Vers le haut

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Pagination with Jquery

Pagination with Jquery

Page 404 exemple 01

Page 404 exemple 01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Header with background animate 01

Header with background animate 01

Form login 02

Form login 02

Form contact avec validation en css

Form contact avec validation en css

Chercher un mot sur la liste

Chercher un mot sur la liste

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js