Kaceykaso/Get-out-of-the-box!.markdown

## Get-out-of-the-box!.markdown

      
    Raw
  

              Get-out-of-the-box!.markdown
            
          
    Get out of the box!

Forked from 'Resizing circle on hover'.
A Pen by Kaceykaso on CodePen.
License.

  
## index.html
<html>
<head>
</head>
  	<body>
    <p id="tip">Get the block out of the box!</p>
    <div class="content">
    			  <div id="border">
        				<div id="block"></div>
				        <p id="success">Success!</p>
  			    </div>
    <div>
  </body>
</html>

## script.js
		$(document).ready(function()
		{
  			callBlock();

  			function callBlock()
			  {
    var top = $('#block').position().top;
    //$('#tip').text(top);
				    if(top < -65) 				{
					      var block = document.getElementById('block');
      					var border = document.getElementById('border');
      					var success = document.getElementById('success');

      					block.style.backgroundColor = 'rgba(0, 255, 0, 0.1)';
      					block.style.top = '-70px';
					      block.style.cursor = 'default';

					      border.style.borderColor = '#090';

      					success.style.opacity = '1';
				    }
    				setTimeout(callBlock, 200);
  			}
		});

## style.css
body
{
  	background: #999;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

#tip
{
  font-size: 24px;
  font-weight: bold;
  color: #444;
  text-align: center;
  text-transform: uppercase;
}

.content
{
  max-width: 100%;
  height: auto;
  	margin: 0 auto;
}

#block
{
	  position: relative;
  top: 170px;
  	left: 24px;
	  background: #555;
	  width: 52px;
	  height: 52px;
  	-webkit-transition: all 3s;
  	-moz-transition: all 3s;
  	-ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
}

#border
{
	  background: transparent;
	  width: 100px;
	  height: 240px;
  	border: 2px dashed #888;
  border-top: none;
  position: relative;
  bottom: -80px;
  left: 45%;
  margin-bottom: 10px;
}

#block:hover
{
  top: -70px;
  cursor: pointer;
}

#success
{
  	margin: 10px 18px;
  	color: #090;
	  opacity: 0;
}
	<html>
	<head>
	</head>
	<body>
	<p id="tip">Get the block out of the box!</p>
	<div class="content">
	<div id="border">
	<div id="block"></div>
	<p id="success">Success!</p>
	</div>
	<div>
	</body>
	</html>
	$(document).ready(function()
	{
	callBlock();

	function callBlock()
	{
	var top = $('#block').position().top;
	//$('#tip').text(top);
	if(top < -65) {
	var block = document.getElementById('block');
	var border = document.getElementById('border');
	var success = document.getElementById('success');

	block.style.backgroundColor = 'rgba(0, 255, 0, 0.1)';
	block.style.top = '-70px';
	block.style.cursor = 'default';

	border.style.borderColor = '#090';

	success.style.opacity = '1';
	}
	setTimeout(callBlock, 200);
	}
	});
	body
	{
	background: #999;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	}

	#tip
	{
	font-size: 24px;
	font-weight: bold;
	color: #444;
	text-align: center;
	text-transform: uppercase;
	}

	.content
	{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	}

	#block
	{
	position: relative;
	top: 170px;
	left: 24px;
	background: #555;
	width: 52px;
	height: 52px;
	-webkit-transition: all 3s;
	-moz-transition: all 3s;
	-ms-transition: all 3s;
	-o-transition: all 3s;
	transition: all 3s;
	}

	#border
	{
	background: transparent;
	width: 100px;
	height: 240px;
	border: 2px dashed #888;
	border-top: none;
	position: relative;
	bottom: -80px;
	left: 45%;
	margin-bottom: 10px;
	}

	#block:hover
	{
	top: -70px;
	cursor: pointer;
	}

	#success
	{
	margin: 10px 18px;
	color: #090;
	opacity: 0;
	}