هنا تجد تتمة الشرح وكيفية وضع الأكواد

<div class="widget-content">
<div class="screen">
<div class="header">
<h4 style="
    margin: 11px;
">الكاتب</h4>
</div>
<div class="slider">
<div class="header1">
<img class="profilepic" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xaf1/v/t1.0-1/p160x160/10565063_680700702023758_6812102086945431951_n.jpg?oh=5cef483307eac05b249706ec918c9604&oe=55812F0D&__gda__=1434724785_3d21e8002be1185bfda8fff6167bee9f" />
<h3>حسن بودري</h3>
</div>
<div class="header2">
<p>
مدونة دقة مدونة حديتة تهتم بالبرمجة و التصميم و هدفها غناء هذين المجالين في العالم العربي و تقديم دروس في التصميم و البــرمـجة , كــذالك تهتـم بالمـهـووسيـن الـعـرب وتـعـطـــي لـكـل مـهـووس تـعريفــا شخـصيــا لـه وعـلى انجــازاته والمهــووس لا يكون بالضرورة مبرمجا او مصمم فالهوس ميادينه مختلفة ,ونعرض بعض خدماتنا
</p>
</div>
</div>
</div>
<style>

.screen:hover .background {
    opacity:0.5;
}
.slider:hover {
    left:-320px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
body {
  
}
.header {
    width:100%;
    height:49px;
    background:#ed6b4b;
    text-align:center;
    float:left;
    color:#fff;
margin-top: 0px;
}
.profilepic {
    width:64px;
    height:64px;
    border-radius:50%;
    margin-top:20px;
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);
    border:2px solid #fff;

}
h3 {
    margin-top:0;
    text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);

}
.screen {
margin: 0 auto;
margin-top: 1px;
width: 316px;
height: 242px;
box-shadow: 0px 2px 6px #999;
position: relative;
overflow: hidden;
background: #333;
}
.slider {
    width:640px;
    float:left;
    left:0;
    position:relative;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
margin-top: -8px;
}
.background {
    position:absolute;
    width:320px;
    height:auto;
    z-index:0;
    top:60px;
    left:0;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.header1, .header2 {
    text-align:center;
    width:320px;
    float:left;
    height:140px;
    color:#fff;
    position:relative;
}
.header2 {
    padding-top:8px;
}
p {
   margin: 10px;
color: #fff;
font-size: 15px !important;
letter-spacing: 0.5px !important;
text-align: right;}
</style>
</div>