اضافة الكاتب بتأثير احترافي وبشكل جميل

السلام عليكم ورحمه الله وبركاته اللهم صلى على محمد على ال محمد

اليوم في هذا شرح جديد وحصري على مدونة حمزه ويب 

راح نقدم لكم كيفية اضافة تعيف الكاتب بتأثير احترافي وخرافي 

هو اضافة يضيف في جافا بتأثير جميل قبل مرور مؤشر ماوس علية

يظهر الاسم كاتب وصور 

بعد مرور مؤشر ماوس عليها يظهر لك التعريف الكامل

شرح اضافة الكاتب بشكل احترافي

1. لوحة تحكم 

2. تخطيط

3. اضافة اداة 

4 . جافا 

واضف هذا كود 

<div class="screen">    <div class="header">         <h4>الكاتب</h4>    </div>    <!-- positioned absolutely in the background -->    <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web" />
      <!-- This slider moves on hover -->        <div class="slider">          <!-- Section 1 -->           <div class="header1">            <img class="profilepic" src="http://im55.gulfup.com/M1UYGx.png" />             <h3>حمزه ويب</h3>
        </div>        <!-- Section 2 -->        <div class="header2">            <p>حمزه ويب مدونة كوردي من كوردستان العراق احب تدوين وكل ما يخص التقنية </p>            <p>للتقنية معنى اخر</p>            <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:#56B8DE;    text-align:center;    float:left;    color:#fff;}.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:24px;    width:320px;    height:200px;    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;}.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 {    font-size:12px;      text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);}</style>

للتعديل عليها 
للتعديل على صورة ابحث عن هذا كود وغييرة برابط صورة الي تريدة 
http://im55.gulfup.com/M1UYGx.png

وغيير كلمات الى كلمات الي تريدة 


وانتظرو كل جديد من حمزه ويب
في امان الله