Код:
 <!--HTML--><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display|Abril+Fatface' rel='stylesheet' type='text/css'>

<style>


#circlecontainer {background-color: #eee; background-image:url(https://upforme.ru/uploads/0019/77/26/2/88643.jpg); width: 400px;	height: 200px;	overflow: hidden;}

#circlecontainer:hover #imagecircle{	margin-right: -280px;}
 #circlecontainer:hover #titlecircle {	margin-left: 30px;	color: rgba(5, 134, 184, 1);}
 #circlecontainer:hover #outerwrap {	margin-left: 25px;}#imagecircle {background-image:url(https://upforme.ru/uploads/0019/77/26/2/28498.jpg);	background-position:right;background-color: #2E6838;	width: 350px;	height: 300px;	float: right; -webkit-border-radius: 300px;	margin-top: -49px;	margin-right: -50px;	position: relative;	-webkit-transition: 0.7s ease-in-out;}

#titlecircle {	background-color:#0586b8;	float: left;	height: 80px;	max-width: 80px;	margin-top: 85px;	-webkit-border-radius: 100px;	padding-left:27px; padding-right: 27px;	padding-bottom: 30px;	padding-top: 20px;position: relative;	margin-left: -60px; color: rgba(245, 249, 254, 1); font-family: playfair display;	font-size: 18px;	letter-spacing: 2px;-webkit-transition: 0.7s ease-in-out; line-height: 21px; text-align: center;	}

 #outerwrap {	float: left;	margin-left: -300px; margin-top: 30px;	-webkit-transition: 0.7s ease-in-out;}
 #innerwrap {width: 280px; height: 120px;	background-color: #121b31; opacity: 70%;	border-top: 6px solid #cc3d7c; margin-top: 3px; }

 #circlecontent {	width: 250px;	height: 100px; overflow: auto;	background-color: #121b31; color: #e0dcf2!important; text-align: justify; font-family: playfair display; font-size: 11px;	line-height: 18px;padding-right: 10px; margin-top: 10px; } #circlecontent::-webkit-scrollbar { width: 3px; }

 #circlecontent::-webkit-scrollbar-track { 	background-color: #transparent; } #circlecontent::-webkit-scrollbar-thumb {background-color: #40b9cd;}

.navdiamond { text-align: center; width: 25px; height: 25px; margin: 20px; padding: 5px; position: relative; color: #40b9cd!important;}

 date {	font-family: abril fatface;	font-weight: 900;	font-size: 20px;} period {	font-family: abril fatface;font-size: 40px;	line-height: 1px;	color: #40b9cd;}
</style>
</head>

<center><div id="circlecontainer"><div id="outerwrap"> 

<div id="innerwrap"><div id="circlecontent">

<date>Nov_13</date>

<period>.</period> и дело вовсе не в примете; <br>только мёртвый не боится смерти; <br>вдоль дорог расставлены посты.
</div></div></div>

<div id="imagecircle"><div id="titlecircle"><br>линия жизни</div></div></div>

</center> 

                <P>
                    <BR><div class="sigsep"></div>