Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Avinash</title>
<style>
body{
    background:#000;
}
li {
    margin: 0px;
    padding:10px;
    list-style:none;
    float:left;
}
​
li img {
    border: 3px solid #fff;
    padding:5px;
    width : 25%;
    height : 25%;
}
.pseudo {
    position:absolute;
    display:none;
    z-index:100;
    border:3px solid #0099f9;
    padding:3px;
    background:#ccc;
}
</style>
​
</head>
<body>
<div id="img">
    <ul>
        <li>
            <img src="http://www.pooh4kids.com/img/winnie_the_pooh_log1.jpg" class ="main"/>
        </li>
        <li>
            <img src="http://aldona.sportjunk.net/files/winnie-the-pooh-evil_1267215064_1275601410.jpg" class ="main"/>
        </li>
        <li>
            <img src="http://images.free-extras.com/pics/w/winnie_the_pooh-1129.jpg" class ="main"/>
        </li>
  </ul>
    <img src="" class="pseudo" />
</div> 
</body>
</html>
 
$(function(){
    $(".main").each(function(){
        $(this).hover(function(e){
            $('.pseudo').stop().fadeTo(700, 0.8).css({"display":"block", left: 20 + e.pageX, top : 20 + e.pageY}).attr({"src":this.src});
        }, function(){
            $('.pseudo').stop().fadeTo(400, 0, function() {
                $(this).css({"display":"none"});
            }); 
        }).bind("mousemove", function(e){
            $('.pseudo').css({left: 20 + e.pageX, top : 20 + e.pageY});
        });
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers