Image hover 01

<!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="style.css" rel="stylesheet" type="text/css">	
</head>
<body >
	<div class="main">	
		<h1>The coolest image hover effect</h1>
		<div class="flex">
		  <figure class="photo red">
			<img src="https://source.unsplash.com/random/" />
			<figcaption>
			  <h2>Ex  <span> Image</span></h2>
			</figcaption>
			<a href="#"></a>
		  </figure>
		  <figure class="photo blue">
			  <img src="https://source.unsplash.com/random/"/>
			<figcaption>
			  <h2>Ex  <span> Image</span></h2>
			</figcaption>
			<a href="#"></a>
		  </figure>
		  <figure class="photo"><img src="https://source.unsplash.com/random/" />
			<figcaption>
			  <h2>Ex <span> Image</span></h2>
			</figcaption>
			<a href="#"></a>
		  </figure>
		</div>		
	</div>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

.main {
	margin-top: 20px;
	margin-bottom: 20px;
}
.main h1{text-align: center;}
figure.photo {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.photo * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

figure.photo img {
  max-width: 100%;
  position: relative;
  opacity: 0.4;
  display: block;
}

figure.photo figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

figure.photo h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.photo h2 span {
  font-weight: 800;
}

figure.photo:before {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: '';
  background: #ffffff;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

figure.photo a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

figure.photo.blue {
  background: #123851;
}

figure.photo.blue h2 {
  background: #0a212f;
}

figure.photo.red {
  background: #581a14;
}

figure.photo.red h2 {
  background: #36100c;
}

figure.photo.yellow {
  background: #7f5006;
}

figure.photo.yellow h2 {
  background: #583804;
}

figure.photo:hover img,
figure.photo.hover img {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

figure.photo:hover h2,
figure.photo.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.photo:hover:before,
figure.photo.hover:before {
  -webkit-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}


/* Demo purposes only */
/* html {
  height: 100%;
}
body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
  margin: 0;
  height: 100%;
} */

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

                                    
Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Css Page grid layout

Css Page grid layout

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Form Création de compte style animée

Form Création de compte style animée

Form login with background image changed style01

Form login with background image changed style01

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Image hover 05

Image hover 05

Image hover Flip Flap Style

Image hover Flip Flap Style

Lightbox gallery style01

Lightbox gallery style01

Nav Menu style02

Nav Menu style02

Transitions Animations SVG Style01

Transitions Animations SVG Style01

page scroll progress bar

page scroll progress bar