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");
  }
);
Background overlay

Background overlay

Card Bootstrap4 02

Card Bootstrap4 02

ChartJS style01

ChartJS style01

Convertir une div en image

Convertir une div en image

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Google Style Login

Google Style Login

Image hover 07

Image hover 07

Loading style book loader

Loading style book loader

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Radio button style

Radio button style

Timeline style06

Timeline style06

toggle switch style01

toggle switch style01