Image hover Inspiration styles

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Image Hover | 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="Bootstrap Image Hover">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <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>
   
	<div class="container py-5">
		<!-- For Demo Purpose -->
		<header class="text-center">
		  <h1 class="display-4 font-weight-bold">Bootstrap Image Hover</h1>
		</header>
	  
		<!-- DEMO 1 -->
		<div class="py-5">
		  <h3 class="font-weight-bold mb-0">Demo 1</h3>
		  <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		  <div class="row">
			<!-- DEMO 1 Item-->
			<div class="col-lg-6 mb-3 mb-lg-0">
			  <div class="hover hover-1 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-1-content px-5 py-4">
				  <h3 class="hover-1-title text-uppercase font-weight-bold mb-0"> <span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-1-description font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			  </div>
			</div>
			<!-- DEMO 1 Item-->
			<div class="col-lg-6">
			  <div class="hover hover-1 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-1-content px-5 py-4">
				  <h3 class="hover-1-title text-uppercase font-weight-bold mb-0"> <span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-1-description font-weight-light mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  
		<!-- DEMO 2-->
		<div class="py-5">
		  <h3 class="font-weight-bold mb-0">Demo 2</h3>
		  <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		  <div class="row">
			<!-- DEMO 2 Item-->
			<div class="col-lg-6 mb-3 mb-lg-0">
			  <div class="hover hover-2 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-2-content px-5 py-4">
				  <h3 class="hover-2-title text-uppercase font-weight-bold mb-0"> <span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-2-description text-uppercase mb-0">Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
				</div>
			  </div>
			</div>
	  
			<!-- DEMO 2 Item-->
			<div class="col-lg-6">
			  <div class="hover hover-2 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-2-content px-5 py-4">
				  <h3 class="hover-2-title text-uppercase font-weight-bold mb-0"> <span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-2-description text-uppercase mb-0">Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  
		<!-- DEMO 3 -->
		<div class="py-5">
		  <h3 class="font-weight-bold mb-0">Demo 3</h3>
		  <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		  <div class="row">
			<!-- DEMO 3 Item-->
			<div class="col-lg-6 mb-3 mb-lg-0">
			  <div class="hover hover-3 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-3-content px-5 py-4">
				  <h3 class="hover-3-title text-uppercase font-weight-bold mb-1"><span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-3-description small text-uppercase mb-0">Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
				</div>
			  </div>
			</div>
			<!-- DEMO 3 Item    -->
			<div class="col-lg-6">
			  <div class="hover hover-3 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-3-content px-5 py-4">
				  <h3 class="hover-3-title text-uppercase font-weight-bold mb-1"><span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-3-description small text-uppercase mb-0">Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit.</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  
		<!-- DEMO 4 -->
		<div class="py-5">
		  <h3 class="font-weight-bold mb-0">Demo 4</h3>
		  <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		  <div class="row">
			<!-- DEMO 4 Item-->
			<div class="col-lg-6 mb-3 mb-lg-0">
			  <div class="hover hover-4 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-4-content">
				  <h3 class="hover-4-title text-uppercase font-weight-bold mb-0"><span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-4-description text-uppercase mb-0 small">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</p>
				</div>
			  </div>
			</div>
			<!-- DEMO 4 Item            -->
			<div class="col-lg-6">
			  <div class="hover hover-4 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-4-content">
				  <h3 class="hover-4-title text-uppercase font-weight-bold mb-0"><span class="font-weight-light">Image </span>Caption</h3>
				  <p class="hover-4-description text-uppercase mb-0 small">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  
	  
		<!-- DEMO 5 -->
		<div class="py-5">
		  <h3 class="font-weight-bold mb-0">Demo 5</h3>
		  <p class="font-italic text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		  <div class="row">
			<!-- DEMO 5 Item-->
			<div class="col-lg-6 mb-3 mb-lg-0">
			  <div class="hover hover-5 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample22.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-5-content">
				  <h3 class="hover-5-title text-uppercase font-weight-light mb-0">Image <strong class="font-weight-bold text-white">Caption </strong><span>Colorfull</span></h3>
				</div>
			  </div>
			</div>
			<div class="col-lg-6">
			  <!-- DEMO 5 Item-->
			  <div class="hover hover-5 text-white rounded"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="">
				<div class="hover-overlay"></div>
				<div class="hover-5-content">
				  <h3 class="hover-5-title text-uppercase font-weight-light mb-0">Image <strong class="font-weight-bold text-white">Caption </strong><span>Colorfull</span></h3>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  
	  </div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
} 

body {
    min-height: 100vh;
    background-color: #fafafa;
  }
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

/* DEMO GENERAL ============================== */
.hover {
    overflow: hidden;
    position: relative;
    padding-bottom: 60%;
  }
  
  .hover-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    transition: all 0.4s;
  }
  
  .hover img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
  }
  
  .hover-content {
    position: relative;
    z-index: 99;
  }
  
  
  /* DEMO 1 ============================== */
  .hover-1 img {
    width: 105%;
    position: absolute;
    top: 0;
    left: -5%;
    transition: all 0.3s;
  }
  
  .hover-1-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    transition: all 0.4s;
  }
  
  .hover-1 .hover-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .hover-1-description {
    transform: translateY(0.5rem);
    transition: all 0.4s;
    opacity: 0;
  }
  
  .hover-1:hover .hover-1-content {
    bottom: 2rem;
  }
  
  .hover-1:hover .hover-1-description {
    opacity: 1;
    transform: none;
  }
  
  .hover-1:hover img {
    left: 0;
  }
  
  .hover-1:hover .hover-overlay {
    opacity: 0;
  }
  
  
  /* DEMO 2 ============================== */
  .hover-2 .hover-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
  }
  
  .hover-2-title {
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 99;
    transition: all 0.3s;
  }
  
  .hover-2-description {
    width: 100%;
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 0;
    text-align: center;
    z-index: 99;
    transition: all 0.3s;
  }
  
  .hover-2:hover .hover-2-title {
    transform: translateY(-1.5rem);
  }
  
  .hover-2:hover .hover-2-description {
    bottom: 0.5rem;
    opacity: 1;
  }
  
  .hover-2:hover .hover-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
  }
  
  
  /* DEMO 3 ============================== */
  .hover-3::after {
    content: '';
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    border: 1px solid #fff;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 90;
    transition: all 0.3s;
    transform: scale(1.1);
    opacity: 0;
    display: block;
    opacity: 0;
  }
  
  .hover-3-content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 99;
  }
  
  .hover-3-description {
    opacity: 0;
    transform: scale(1.3);
    transition: all 0.3s;
  }
  
  .hover-3 img {
    width: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .hover-3 .hover-overlay {
    background: rgba(0, 0, 0, 0.2);
  }
  
  .hover-3:hover img {
    width: 100%;
  }
  
  .hover-3:hover::after {
    opacity: 1;
    transform: none;
  }
  
  .hover-3:hover .hover-3-description {
    opacity: 1;
    transform: none;
  }
  
  .hover-3:hover .hover-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  
  /* DEMO 4 ============================== */
  .hover-4 img {
    width: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .hover-4 .hover-overlay {
    background: rgba(0, 0, 0, 0.4);
    z-index: 90;
  }
  
  .hover-4-title {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3rem;
    z-index: 99;
  }
  
  .hover-4-description {
    position: absolute;
    top: 2rem;
    left: 2rem;
    text-align: right;
    border-right: 3px solid #fff;
    padding: 0 1rem;
    z-index: 99;
    transform: translateX(-1.5rem);
    opacity: 0;
    transition: all 0.3s;
  }
  
  @media (min-width: 992px) {
    .hover-4-description {
      width: 50%;
    }
  }
  
  .hover-4:hover img {
    width: 100%;
  }
  
  .hover-4:hover::after {
    opacity: 1;
    transform: none;
  }
  
  .hover-4:hover .hover-4-description {
    opacity: 1;
    transform: none;
  }
  
  .hover-4:hover .hover-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  
  /* DEMO 5 ============================== */
  .hover-5::after {
    content: '';
    width: 100%;
    height: 10px;
    background: #47c650;
    position: absolute;
    bottom: -10px;
    left: 0;
    display: block;
    transition: all 0.3s;
    z-index: 999;
  }
  
  .hover-5 .hover-overlay {
    background: rgba(0, 0, 0, 0.4);
  }
  
  .hover-5-title {
    position: absolute;
    bottom: 1rem;
    left: 0;
    transition: all 0.3s;
    padding: 2rem 3rem;
    z-index: 99;
  }
  
  .hover-5-title span {
    transition: all 0.4s;
    opacity: 0;
    color: #47c650;
  }
  
  .hover-5:hover .hover-overlay {
    background: rgba(0, 0, 0, 0.8);
  }
  
  .hover-5:hover .hover-5-title {
    bottom: 0;
  }
  
  .hover-5:hover .hover-5-title span {
    opacity: 1;
  }
  
  .hover-5:hover::after {
    bottom: 0;
  }
  

                                    
Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Create icon animate with svg

Create icon animate with svg

Form contact avec validation en css

Form contact avec validation en css

Form login 02

Form login 02

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Nav Menu style01

Nav Menu style01

Table bootstrap with Datatable

Table bootstrap with Datatable

Timeline style02

Timeline style02

Vers le haut

Vers le haut

Vidéo background en html5 style01

Vidéo background en html5 style01

toggle switch style02

toggle switch style02

toggle switch style03

toggle switch style03