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 radio checkbox b4 style

input radio checkbox b4 style

input file récupérer le nom du fichier

input file récupérer le nom du fichier

Timeline style03

Timeline style03

Simple Table With UIKIT

Simple Table With UIKIT

Profile page with b4

Profile page with b4

Header with background animate 01

Header with background animate 01

Form contact avec validation en css

Form contact avec validation en css

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

ChartJS style01

ChartJS style01

Calculatrice style01

Calculatrice style01

Blog post card 01

Blog post card 01