Now On Sale

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

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
Copyright codybaldwin ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Now On Sale</title>
      <link rel="stylesheet" href="css/style.css">



  <div class="col-xs-12">
					  <a class="animated bounceInLeft" href="">
						<section class="background">
						  <div class="background_overlay">
							<div class="background_overlay__inner">
							  <h1 class="background_overlay__header">
								NOW ON SALE



/*Downloaded from */
@import url(;

/* 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('');
.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("");
  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: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;