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 multiple input dynamique

Ajouter multiple input dynamique

Background overlay

Background overlay

Card Bootstrap4 01

Card Bootstrap4 01

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Form Step With B4 Style01

Form Step With B4 Style01

Image hover effects style

Image hover effects style

Manual Slideshow

Manual Slideshow

Menu aside style01 slide out

Menu aside style01 slide out

Timeline style05

Timeline style05

Titre section avec une anmation style01

Titre section avec une anmation style01

login page green one

login page green one