Image hover 07

<!DOCTYPE html>
<html>
<head>
	<title>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="Image hover effects style">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<meta name="robots" content="noindex,nofollow">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-4 col-12">
                <figure class="snip1426">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
            <div class="col-md-4 col-12">
                <figure class="snip1426 hover">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
            <div class="col-md-4 col-12">
                <figure class="snip1426">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
            <div class="col-md-4 col-12">
                <figure class="snip1426">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
            <div class="col-md-4 col-12">
                <figure class="snip1426">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
            <div class="col-md-4 col-12">
                <figure class="snip1426">
                    <img src="https://source.unsplash.com/random/" alt="sample70" />
                    <figcaption>
                      <div>
                        <h2>Image</h2>
                        <h4>One</h4>
                      </div>
                    </figcaption>
                    <a href="#"></a>
                </figure>
            </div>
        </div>
    </div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
figure.snip1426 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  background-color: #000000;
}
figure.snip1426 *,
figure.snip1426 *:before,
figure.snip1426 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
figure.snip1426 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
figure.snip1426 figcaption {
  position: absolute;
  bottom: 25px;
  right: 25px;
  padding: 5px 10px 10px;
}
figure.snip1426 figcaption:before,
figure.snip1426 figcaption:after {
  height: 2px;
  width: 400px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
figure.snip1426 figcaption:before {
  top: 0;
  left: 10px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
figure.snip1426 figcaption:after {
  bottom: 0;
  right: 10px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
figure.snip1426 figcaption div:before,
figure.snip1426 figcaption div:after {
  width: 2px;
  height: 300px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
figure.snip1426 figcaption div:before {
  top: 10px;
  right: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
figure.snip1426 figcaption div:after {
  bottom: 10px;
  left: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
figure.snip1426 h2,
figure.snip1426 h4 {
  margin: 0;
  text-transform: uppercase;
}
figure.snip1426 h2 {
  font-weight: 400;
}
figure.snip1426 h4 {
  display: block;
  font-weight: 700;
  background-color: #ffffff;
  padding: 5px 10px;
  color: #000000;
}
figure.snip1426 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.snip1426:hover img,
figure.snip1426.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figure.snip1426:hover figcaption:before,
figure.snip1426.hover figcaption:before,
figure.snip1426:hover figcaption:after,
figure.snip1426.hover figcaption:after,
figure.snip1426:hover figcaption div:before,
figure.snip1426.hover figcaption div:before,
figure.snip1426:hover figcaption div:after,
figure.snip1426.hover figcaption div:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
figure.snip1426:hover figcaption:before,
figure.snip1426.hover figcaption:before,
figure.snip1426:hover figcaption:after,
figure.snip1426.hover figcaption:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Tablet style code texte

Tablet style code texte

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Menu aside style01 slide out

Menu aside style01 slide out

Input range slider HTML style04

Input range slider HTML style04

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login 03

Form login 03

Form Step With B4 Style01

Form Step With B4 Style01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Css Page grid layout

Css Page grid layout

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery