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

                                    
input radio checkbox b4 style

input radio checkbox b4 style

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Table responsive avec css native

Table responsive avec css native

SwiperJS style01

SwiperJS style01

Responsive image grid

Responsive image grid

Image hover effects style

Image hover effects style

Image hover 01

Image hover 01

Form login b4 01

Form login b4 01

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Compteur avec b4

Compteur avec b4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background div gradient

Background div gradient