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