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 supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Carousel Bootstrap4

Carousel Bootstrap4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Chercher un mot sur la liste

Chercher un mot sur la liste

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Dropdown right aligned B4

Dropdown right aligned B4

Header with background animate 01

Header with background animate 01

Input range slider HTML style01

Input range slider HTML style01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

input file récupérer le nom du fichier

input file récupérer le nom du fichier

login page green one

login page green one

toggle switch style01

toggle switch style01