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 tr in table with js

up down tr in table with js

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Image hover 04

Image hover 04

Image hover 03

Image hover 03

Image hover 02

Image hover 02

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login b4 01

Form login b4 01

Form login 03

Form login 03

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Carousel Bootstrap4

Carousel Bootstrap4

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Arrows Defense Game

Arrows Defense Game