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

Ajouter multiple input dynamique

Card Bootstrap4 01

Card Bootstrap4 01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Css Page grid layout

Css Page grid layout

Form Création de compte style animée

Form Création de compte style animée

Form Step With B4 Style01

Form Step With B4 Style01

Image hover 02

Image hover 02

Image hover 06

Image hover 06

Simple Table With UIKIT

Simple Table With UIKIT

Table responsive avec css native

Table responsive avec css native

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

login page green one

login page green one