<div class="row">
	
	<div class="column medium-12">
		<h1 class="text-center">Animated border CSS</h1>
	</div>
	
	<div class="column medium-12 text-center">
		<div class="element">
			<img src="https://images.unsplash.com/photo-1518727009842-83f936fd395b?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b5b9f707abe134ce8d73053370044f7b" alt="van" />
		</div>
	</div>
	
</div>

body{
	margin: 0;
	padding: 0 1rem;
	background: #754F5B;
	font-size: 16px;
}
//GENERAL
h1{
	position: relative;
	margin-top: 3rem;
	text-transform: uppercase;
	font-size: 2em;
	font-weight: 400;
	color: #E3CCC6;
	&::after{
		content: '';
		position: absolute;
		bottom: -1.8rem;
		left: 50%;
		transform: translateX(-50%);
		width: 8px;
		height: 8px;
		background: currentcolor;
		opacity: .4;
		border-radius: 50%;
		box-shadow: -30px 0 0,
			         30px 0 0;
	}
}


/*************************
	Border Effect Styles
**************************/

// THE ELEMENT
.element{
	position: relative;
	display: inline-block;
	width: 30rem;
	max-width: 100%;
	margin: 4rem 0;
	img{
		width: 100%;
		opacity: .4;
	}
}

// PSEUDO ELEMENTS
.element::before, .element::after{
	content:'';
	z-index: 10;
	position: absolute;
	top: 0;left: 0;right: 0;bottom: 0;
	border: 3px solid #E3CCC6;
	transform: scale(0.2);
	transition: transform 0.4s ease-in-out;
}
.element::before{
	transform-origin: left top;
	border-right: 0;
	border-bottom: 0;
}
.element::after{
	transform-origin: right bottom;
	border-top: 0;
	border-left: 0;
}

// HOVER FX
.element:hover::before,
.element:hover::after{
	transform: scale(1.0);
}

/*

Border Animation On Hover With CSS
	
*/