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");
  }
);
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Arrows Defense Game

Arrows Defense Game

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Background div gradient

Background div gradient

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Carousel Bootstrap3

Carousel Bootstrap3

Create icon animate with svg

Create icon animate with svg

Form login et créer un compte style01

Form login et créer un compte style01

Page 404 exemple 01

Page 404 exemple 01

Tablet style code texte

Tablet style code texte

Titre section avec une bande style01

Titre section avec une bande style01

texte animate css

texte animate css