Image hover 05

<!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">
                <div class="box mb-4">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <div class="box mb-4">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </div>
			<div class="col-md-4 col-12">
                <div class="box mb-4">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <div class="box mb-4 hover">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </div>
			<div class="col-md-4 col-12">
                <div class="box mb-4">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </div>
			<div class="col-md-4 col-12">
                <div class="box mb-4">
                    <img src="https://source.unsplash.com/random/" alt="image_hover" />
                    <div class="box-content">
                        <h3>Hover me</h3>
                        <p>This is a very beautiful hover effect in pure css</p>
                    </div>
                </div>
            </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>
body {
  margin-top: 100px !important;
}
.box {
  color: #fff;
  font-size: 16px;
  overflow: hidden;
  position: relative;
  text-align: right;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;

}
.box img {
  width: 100%;
  height: 100%;
}
.box:before,
.box:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1a7ebb;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.box:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.box:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}
.box:hover:before,
.box.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.box:hover:after,
.box.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}
.box .box-content {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.box .box-content:before,
.box .box-content:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F40076;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  opacity: 0.5;
  z-index: -1;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.box .box-content:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.box .box-content:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}
.box:hover .box-content:before,
.box.hover .box-content:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.box:hover .box-content:after,
.box.hover .box-content:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.box h3,
.box p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.box h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.box p {
  font-size: 15px;
}

.box:hover h3,
.box.hover h3,
.box:hover p,
.box.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

@media screen and (max-width: 990px){
  .box{
      margin-bottom: 30px;
  }
}
@media screen and (max-width:768px){
.box h3{
font-size:20px;
}
}

                                    
texte animate css

texte animate css

login page green one

login page green one

Vidéo background en html5 style02

Vidéo background en html5 style02

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Organization Chart

Organization Chart

Loading style book loader

Loading style book loader

Form Création de compte

Form Création de compte

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Background div gradient

Background div gradient

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table