Item: CSS Price Thermometer
Rating: 3.4
Author: tbloncar

1 Downloads
13 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Price Thermometer</title>
  <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Abel' />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Price Thermometer by <span>Travis Loncar</span></p>


<h1>Price Thermometer</h1>

<div class="pricing-box">
  <div class="pricing-thermo">
    <!-- Thermometer -->
		<div class="pricing-total">
		</div>
    <!-- Price -->
		<div class="pricing-number">
		Starting at $500
		</div>
	</div>
</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/tbloncar/css-price-thermometer-bouAh */
body {
  background: #CCC;
}

p {
  font-family: 'Abel', sans-serif;
  display: block;
  padding: 10px;
}

span {
  color: rgba(255,51,0,0.85);
}

h1 {
  font-family: 'Abel', sans-serif;
  text-align: center;
  margin: 50px;
  color: #222;
}

.pricing-thermo {
  background: #EEE;
  width: 50%;
  height: 60px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  margin: 50px auto;
	padding: 3px;
}

.pricing-total {
	height: 100%;
	background: rgba(255,51,0,0.85);
  -webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-o-border-radius: 50px;
	border-radius: 50px;
	width: 15%;
	margin-right: 10px;
	float: left;
	-webkit-transition: width 0.4s ease-in-out;
	-moz-transition: width 0.4s ease-in-out;
	-o-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;

}

.pricing-number {
	font-family: 'Arial', sans-serif;
	color: rgba(0,0,0,0.6);
	height: 30px;
	width: 130px;
	padding: 7px 0 0 0;
  text-align: center;
	background: #FFF;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	margin-top: 12px;
	float: left;
	display: none;
  font-size: 14px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
  -o-box-shadow: 0px 0px 2px rgba(0,0,0,0.45);
}

.pricing-box:hover .pricing-number {
	display: block;
}

.pricing-box:hover .pricing-total {
	width: 60%;
}

Comments

More from tbloncar

CSS Price Thermometer

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and Javascript

On hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.

Technologies

Comments

More from tbloncar

easyegg.js

CSS Price Thermometer

Dropdown Month Picker

You Might Also Like

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background

CSS Price Thermometer

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and JavascriptOn hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.

Technologies

Comments

More from tbloncar

easyegg.js

CSS Price Thermometer

Dropdown Month Picker

You Might Also Like

Cute Punnies

Perfil TDH

TableFilter sort numeric column with empty values

Poly Template [WIP]

Task 52

Critical bug Gong

Image / Album Gallery

Material background

In this example below you will see how to do a CSS Price Thermometer with some HTML / CSS and Javascript

On hover of surrounding div, transition is used to simulate the "temperature," or more appropriately, price, rising. Starting price is displayed next to the thermometer filling.