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 style01

toggle switch style01

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style04

Timeline style04

Texte Block Posts Style01

Texte Block Posts Style01

Table Responsive with css 01

Table Responsive with css 01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Radio button style

Radio button style

Image hover effects style

Image hover effects style

Header with background animate 01

Header with background animate 01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Css Page grid layout

Css Page grid layout

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input