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

                                    
toggle switch style03

toggle switch style03

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style04

Timeline style04

Tablet style code texte

Tablet style code texte

SwiperJS style01

SwiperJS style01

Simple Table With UIKIT

Simple Table With UIKIT

Responsive image grid

Responsive image grid

Loading style book loader

Loading style book loader

ChartJS style01

ChartJS style01

Card Bootstrap4 02

Card Bootstrap4 02

Background div gradient

Background div gradient

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select