راهنمایی - نسخه‌ی قابل چاپ

کد php:
<!doctype html>
<html lang="fa">
 <head>
     <title>مثال</title>
     <meta charset="UTF-8">
     <meta name="description" content="">
     <meta name="keywords" content="">
     <meta name="robots" content="index,follow">
     <meta name="copyright" content="">
     
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        *{
                direction:rtl;
                padding:0;
                margin:0;
        }
        body{
            background-color:#f7f7f7;
        }
        #main{
                margin-right:500px;
                margin-top:100px;

        }
        .img{
                transition-property: margin-top;
                transition-duration: 2s;
                transition-delay: 0.5s;
                margin-top:-50px;
                margin-left:15px;

        }
        .text-background{
                height:50px;
                width:400px;
                background-color:#ffffff;
                
        }
        .text{
                padding-right:5px;
                font-size:15pt;
                color:#929292;
                text-decoration:none;
        }
    </style>
 </head>
 <body>
     <div id="main">
         <div class="text-background"><a class="text" href="">سلام من یک عنوان پست هستم</a></div>
         <img class="img" alt="عکس" src="http://upload7.ir/uploads//3387371684dc20fdbf4d0862de2aa4cef3f27d4c.jpg">
         
         <!-- jquery  -->
         <script>
                $(document).ready(function(){
                    $("img").hover(function(){
                        $(".img").css("margin-top", "0px");
                    });
                });

        </script>
        <!--  -->
     </div>
 </body>
</html>