<div class="justtocenternextdiv">
<div class="review-num">
<div class="number">
	<span class="value-number">
	00
	</span>

	<span class="text-number">
	hey & there !!!
		<hr class="dotted-line"></hr>
	</span>
	
	<span class="line-number">
	
		<div class="square-line">					
		</div>
	</span>
	
	
	
	
	</div>

	
	

	
	
</div>
	
	</div>
@import url('https://fonts.googleapis.com/css?family=Oswald');

.justtocenternextdiv{
	position:absolute;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
	margin:auto;
}

.review-num{
	width:150px;
	height:90px;
	display:block;
	margin:auto;
	transform:translateY(75%);
}

.number{
	font-family: 'Oswald', sans-serif;
	color: #cacaca;
	
	.value-number{
		font-size:4.7em;
		transition:0.3s all ease;
	}
	
	.text-number{
    transform: rotate(-90deg);
    width: 140px;
    height: 45px;
    position: absolute;
    top: 61px;
    left: 25px;
		letter-spacing: 0.7px;
    text-align: right;
		text-transform:uppercase;
		
	}
	.dotted-line{
	border:1px dashed #cacaca;
	// transform:scaleX(1.3);
	

	}
	
	.line-number{
		height:1px;
		background-color:#cacaca;
		width:170px;
		display:inline-block;
		position:absolute;
		bottom:0px;
		right:82px;
		transition:0.3s all ease;
		text-align:left;
	}
	.line-number:after{
		width:10px;
		height:10px;
		background:#cacaca;
		content:"";
		display:inline-block;
		margin-top:4px;
		transition:0.3s all ease;
	}
	
	&:hover{
		.value-number{
			color:#26b06a;
			transition:0.3s all ease;
		}
		.text-number{

			transition:0.3s all ease;
			
		}
		.line-number{
			width:100px;
			transition:0.3s all ease;
			animation: line_animation 0.4s ease;
		}
		.line-number:after{
			animation:cube_loco 0.4s ease;
		}
		
	}
	
	
}


@keyframes cube_loco {
   	0% 		{ transform:scaleX(1);}
		5% 		{ transform:scaleX(0.4);}
		15% 		{ transform:scaleX(4);}
		25%		{ transform:scaleX(2); 										background:#909090; }
		50%		{ transform:scaleX(1.3); }
		75%		{ transform:scaleX(1); }
		76%   { visibility:hidden;}
		80%   {visibility:visible;}	
		83%   { visibility:hidden;}
		90%   {visibility:visible;}	
		95%   { visibility:hidden;}
		100%   {visibility:visible;}	

}

@keyframes line_animation {
	0% {transform:scaleX(1);}
	10% {transform:scaleX(1.3);}
	85% {transform:scaleX(0.8);}
	100% {transform:scaleX(1);}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.