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;
}
}

                                    
Bloc resizable with jquery

Bloc resizable with jquery

Carousel Bootstrap4

Carousel Bootstrap4

Chercher un mot sur la liste

Chercher un mot sur la liste

Form Création de compte

Form Création de compte

Image hover 04

Image hover 04

Nav Menu style02

Nav Menu style02

Planète animée style01

Planète animée style01

Radio button style

Radio button style

Scroll to div ID

Scroll to div ID

Timeline style05

Timeline style05

Vidéo background en html5 style02

Vidéo background en html5 style02

input radio checkbox b4 style

input radio checkbox b4 style