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

                                    
Asidebar Menu Style01

Asidebar Menu Style01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Form login et créer un compte style01

Form login et créer un compte style01

Image hover 03

Image hover 03

Image hover Inspiration styles

Image hover Inspiration styles

Image hover effects style

Image hover effects style

Image hover style border top

Image hover style border top

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Timeline style02

Timeline style02

Timeline style04

Timeline style04

bootstrap4 tabs

bootstrap4 tabs

page scroll progress bar

page scroll progress bar