Now On Sale

Tutorials of (Now on sale) by Cody baldwin

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Now On Sale</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="col-xs-12">
					  <a class="animated bounceInLeft" href="https://www.rakuten.ne.jp/gold/oyster-sisters/ichiran.html#karatsuki">
						<section class="background">
						  <div class="background_overlay">
							<div class="background_overlay__inner">
							  <h1 class="background_overlay__header">
								NOW ON SALE
							  </h1>
							</div>
						  </div>
						</section>
					  </a>
				  </div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* Padding below the footer and lighter body text */
body {
	padding-bottom: 40px;
	color: #5a5a5a;
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 200;
	background-color: #ffffff;
	overflow-x: hidden;
}

/* special insert for the NOW ON SALE area */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
.spexial *,
.spexial *:before,
.spexial *:after {
  box-sizing: border-box;
}

.spexial {
  font-family: "Roboto Condensed", sans-serif;
  text-align: center;
  margin-bottom: 10px;
}
.background {
  background-image: url("https://www.rakuten.ne.jp/gold/oyster-sisters/pics/index/orig_imgs/123.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 20vh;
  position: relative;
}
.background_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  mix-blend-mode: lighten;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.background_overlay:hover {
  background-color: transparent;
  mix-blend-mode: normal;
}
.background_overlay:hover .background_overlay__header {
  color: #ffffff;
}
.background_overlay:hover .background_overlay__header:after,
.background_overlay:hover .background_overlay__header:before {
  background-color: #ffffff;
  width: 20%;
}
.background_overlay__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 20vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.background_overlay__header {
  font-size: 10vh;
  color: #000000;
  display: inline-block;
  position: relative;
}
.background_overlay__header:after,
.background_overlay__header:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 1vh;
  background-color: #000000;
  -webkit-transition: width 500ms ease;
  transition: width 500ms ease;
}
.background_overlay__header:after {
  left: auto;
  right: 50%;
}
.background_overlay__header:before {
  left: 50%;
  right: auto;
}

/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Now On Sale ) is write by Cody Baldwin, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Cody Baldwin