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;
}

                                    
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Form Création de compte

Form Création de compte

Form Step With B4 Style01

Form Step With B4 Style01

Form login 03

Form login 03

Google Style Login

Google Style Login

Image hover effects style

Image hover effects style

Nav Menu style02

Nav Menu style02

Timeline style03

Timeline style03

Timeline style06

Timeline style06

bootstrap4 tabs

bootstrap4 tabs

input radio checkbox b4 style

input radio checkbox b4 style