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

                                    
Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Timeline style02

Timeline style02

Planète animée style01

Planète animée style01

Pagination with Jquery

Pagination with Jquery

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Loading style book loader

Loading style book loader

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style04

Input range slider HTML style04

Input file style01

Input file style01

Chercher un mot sur la liste

Chercher un mot sur la liste

Background div gradient

Background div gradient