Оформляем блок предыдущая/следующая новость

Наткнулся на вот такое интересное оформление блока и анимации при наведении.

HTML-код блока:

<div class="pagination pagination-post clearfix">
	<a href="http://bigbangthemes.net/Wordie_WP/2015/07/30/create-an-external-link-with-a-link-post/" class="pull-left">
		<i class="fa fa-angle-left"></i>
		<span class="linkinfo">
			<span class="title underlined shown"><span>Prev Story</span></span>
			<span class="description">Create An External Link With A Link Post</span>
		</span>
	</a>

	<a href="http://bigbangthemes.net/Wordie_WP/2015/07/30/bring-your-facebook-page-and-blog-closer-together-2/" class="pull-right">
		<i class="fa fa-angle-right"></i>
		<span class="linkinfo">
			<span class="title underlined shown"><span>Next Story</span></span>
			<span class="description">Bring Your Facebook Page and Blog Closer Together</span>
		</span>
	</a>

	<div class="hint">what will you read next?</div>
</div>

CSS-стили:

.pagination.pagination-post {
    margin-bottom: 150px;
}
.pagination {
    display: block;
}

.pagination.pagination-post a {
    perspective: 280px;
}
.pagination a {
    color: #616f79;
    font-family: "Oswald",sans-serif;
    font-size: 20px;
    line-height: 72px;
    position: relative;
    text-transform: uppercase;
}

.pagination.pagination-post .fa {
    height: 108px;
    line-height: 108px;
    margin: 0;
}
.pagination .fa {
    background-color: #e8edf5;
    color: #8998a6;
    font-size: 30px;
    padding-right: 8px;
    text-align: center;
    text-shadow: 6px 0 0 #8998a6;
    transition: all 0.2s ease-out 0s;
    width: 68px;
}

.pagination.pagination-post .linkinfo {
    background-color: #9fabb8;
    height: 108px;
    left: 100%;
    opacity: 0;
    padding: 17px 10px 10px 19px;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 50% 0;
    transition: all 0.2s ease-out 0s;
    visibility: hidden;
    width: 250px;
}

.pagination.pagination-post .linkinfo .title {
    border-bottom-color: #dee3eb;
    color: #ffffff;
    display: block;
    font-size: 15px;
    line-height: 1;
    margin-bottom: 1.1em;
}
.title.underlined {
    font-weight: 400;
}

.pagination.pagination-post .linkinfo .title span::before {
    background-color: #dee3eb;
}
.title.underlined.shown span::before {
    width: 100%;
}
.title.underlined span::before {
    background-color: #b5c1c9;
    bottom: -4px;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    transition: all 0.2s ease-out 0s;
    width: 0;
}
.pagination.pagination-post .linkinfo .title span {
    padding-bottom: 0.4em;
}
.title.underlined span {
    display: inline-block;
    position: relative;
}

.pagination.pagination-post .linkinfo .description {
    color: #353d4a;
    display: block;
    font-family: "Merriweather",serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    max-height: 38.4px;
    overflow: hidden;
    text-transform: none;
}


.pagination a:hover .fa, .pagination a:active .fa {
    background-color: #616f79;
    color: #ffffff;
    text-shadow: 6px 0 0 #ffffff;
}
.pagination.pagination-post a:hover .linkinfo, .pagination.pagination-post a:active .linkinfo {
    opacity: 1;
    transform: rotateY(0deg);
    visibility: visible;
}

источник и демо

и еще одно оформление в платном шаблоне для вордпресса