<div class="image-border">
	<div class="main-image"></div>
	<p class="title">IMAGE HEADLINE</p>
</div>
%flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro';
	
	@extend %flex;
}

.image-border {
	width: 300px;
	height: 300px;
	background-color: #eee;
	background-image: url('https://unsplash.it/300?image=885');
	position: relative;
	z-index: 1;
	
	&:after {
		content: '';
		position: absolute;
		width: 290px;
		height:290px;
		left: 5px;
		top: 5px;
		background-color: #fff;
	}
	
	.main-image {
		position: absolute;
		width: 290px;
		height:290px;
		left: 5px;
		top: 5px;
		background-image: url('https://unsplash.it/300?image=885');
		background-size: 300px 300px;
		background-position: center center;
		z-index: 2;
		transition: .5s cubic-bezier(.5,.03,.41,1);
	}
	
	&:hover > .main-image {
		transform: translate(-15px, -15px);
		transition: .5s cubic-bezier(.5,.03,.41,1);
	}
	
	&:hover > p.title:after {
		transform: scale3d(1, 1, 1);
		transition: .5s cubic-bezier(.5,.03,.41,1);
	}
	
	p.title {
		height: 60px;
		padding: 0;
		position: absolute;
		bottom: -80px;
		font-weight: 400;
		line-height: 60px;
		color: #2c3e50;
		font-size: 1em;
		margin-left: 150px;
		transform: translateX(-50%);
		
		&:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 1px;
			background-color: #e74c3c;
			bottom: 10px;
			left: 0;
			transform: scale3d(0, 1, 1);
			transition: .5s cubic-bezier(.5,.03,.41,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.