Код:
<!--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/48499.jpg); width: 400px; height: 200px; overflow: hidden;}
#circlecontainer:hover #imagecircle{ margin-right: -280px;}
#circlecontainer:hover #titlecircle { margin-left: 30px; color: rgba(255,255,255,0.00);}
#circlecontainer:hover #outerwrap { margin-left: 25px;}#imagecircle {background-image:url(https://upforme.ru/uploads/0019/77/26/2/46353.gif); 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:#31184e; 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(221, 26, 59, 1); text-shadow: 2px 2px rgba(16, 10, 214, 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: 60%; border-top: 6px solid #cd1c2f; 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: #cd1c2f;}
.navdiamond { text-align: center; width: 25px; height: 25px; margin: 20px; padding: 5px; position: relative; color: #cd1c2f!important;}
date { font-family: abril fatface; font-weight: 900; font-size: 20px;} period { font-family: abril fatface;font-size: 40px; line-height: 1px; color: #cd1c2f;}
</style>
</head>
<center><div id="circlecontainer"><div id="outerwrap">
<div id="innerwrap"><div id="circlecontent">
<date>Nov_13</date>
<period>.</period> don't walk away, you love me;<br>
no matter what you say, you need me;<br>
don't try to change what is meant to be;<br>
always will adore you, always be there for you;<br>
how can you ignore my love?<br>
give yourself up to me...</div></div></div>
<div id="imagecircle"><div id="titlecircle">give yourself up to me</div></div></div>
</center>
<P>
<BR><div class="sigsep"></div>
