Image hover Flip Flap Style

<!DOCTYPE html>
<html>
<head>
	<title>IMAGE HOVER FLIP FLAP STYLE | 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 FLIP FLAP STYLE">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="index,follow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body class="container">
<div class="row mt-5">	
	<ul id="portfolio">
		<a href="#">
		<li class="projet">
		  <div class="thumb">
			<img class="img-thumb" alt="" title="" src="../../assets/imgs/all/apprendre-nglesson.jpg" />
		  </div>
		  <h3 class="titre">Hover me</h3>
		</li>
		</a>
		<a href="#">
		<li class="projet">
		  <div class="thumb">
			<img class="img-thumb" alt="" title="" src="../../assets/imgs/all/apprendre-nglesson.jpg" />
		  </div>
		  <h3 class="titre">Hover me</h3>
		</li>
		</a>
		<a href="#">
		<li class="projet">
		  <div class="thumb">
			<img class="img-thumb" alt="" title="" src="../../assets/imgs/all/apprendre-nglesson.jpg" />
		  </div>
		  <h3 class="titre">Hover me</h3>
		</li>
		</a>
		<a href="#">
		<li class="projet">
		  <div class="thumb">
			<img class="img-thumb" alt="" title="" src="../../assets/imgs/all/apprendre-nglesson.jpg" />
		  </div>
		  <h3 class="titre">Hover me</h3>
		</li>
		</a>
	</ul>			
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>   
</body>
</html>
li{
  list-style-type:none;
}
a{
	margin-left:20px;
	display:inline-block;
    width:240px;
	height:240px;
	text-decoration:none !important;
}
ul a li h3{
	font-family:georgia;
	color:white;
	display: table-cell;
	font-size: 30px;
	font-weight: lighter;
	height: 200px;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
	width: 240px;
	padding:20px;
	background-color:#CCC;
	border-radius:20px;
}
.thumb{
	height: 240px;
	position: absolute;
	width: 240px;
}
li:hover .thumb img{
	display: none;
}
.img-thumb{
	height: 240px !important;
	width: 240px !important;
	border-radius:20px;
}

                                    
Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Convertir une div en image

Convertir une div en image

Image hover 01

Image hover 01

Profile page with b4

Profile page with b4

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Timeline style01

Timeline style01

toggle switch style03

toggle switch style03