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

                                    
toggle switch style03

toggle switch style03

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

Titre section avec une bande style01

Titre section avec une bande style01

Pie Charts

Pie Charts

Image hover style border top

Image hover style border top

Image hover 06

Image hover 06

Geocoded Locations

Geocoded Locations

Form login et créer un compte style01

Form login et créer un compte style01

Form login b4 01

Form login b4 01

Cards box with title

Cards box with title

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select