سلام دوستان عزیز
من میخواستم از شما راهنمایی بگیرم چطور میتونم کدی داشته باشم که وقتی موس روی یک عکس میره اون عکس کنار بیاد و یک نوشته (نه عکس نوشته که توی گوگل هم ایندکس بشه) رو نمایش بده و با کلیک به سایتی بره ولی وقتی موس رو بر میداریم دوباره همون عکس بشه ؟
این کد هست ولی عکس پایین میاد و وقتی هم موس کنار میره عکس به جای اول خودش بر نمیگرده در ضمن میخوام متن و عکس حالت خالی داشته باشند
خیلی ممنونم
<!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>
