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

                                    
login page green one

login page green one

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

SwiperJS style01

SwiperJS style01

Scroll down button 01

Scroll down button 01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Page 404 exemple 01

Page 404 exemple 01

Manual Slideshow

Manual Slideshow

Dropdown right aligned B4

Dropdown right aligned B4

Card Bootstrap4 01

Card Bootstrap4 01

Blog post card 01

Blog post card 01

Background div gradient

Background div gradient

Alert Bootstrap4 style01

Alert Bootstrap4 style01