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

                                    
up down tr in table with js

up down tr in table with js

Timeline style04

Timeline style04

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Input range slider HTML style05

Input range slider HTML style05

Image hover style border top

Image hover style border top

Image hover Inspiration styles

Image hover Inspiration styles

Form Création de compte

Form Création de compte

Drag and drop or upload input file

Drag and drop or upload input file

Compteur avec b4

Compteur avec b4

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Bloc resizable with jquery

Bloc resizable with jquery

Ajouter une pagination1

Ajouter une pagination1