Now On Sale

In this example below you will see how to do a Now On Sale with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by codybaldwin, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright codybaldwin ©
  • HTML
  • CSS
<!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/codybaldwin/now-on-sale-aBaWZb */
@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;
}


Comments