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 src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<section>
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
    <img src = "http://www.despegar.com.ar/media/pictures/a88983cb-c7b2-4206-bf6b-3ac33dcf912e/650x550" />
</section>
<div id = "fondo"></div>
<div id = "salida"></div>
</body>
</html>
 
body{
    background: lightsteelblue;
}
​
section{
    width: 21rem;
    position: absolute;
    margin-left: -10.5rem;
    left: 50%;
    top: 30%;
}
​
img{
    width: 5rem;
    height: 3.5rem;
    cursor: pointer;
    transition: .25s;
}
​
img:hover{
    transform: scale(1.1) rotate(360deg);
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
}
​
#fondo, #salida{
    position: absolute;
    z-index: 1000;
    display: none;
}
​
#fondo{
    background: rgba(0, 0, 0, .75);
    top: 0;
    left: 0;
}
​
#salida{
    width: 650px;
    height: 550px;
}
 
$("img").click(function(){
    var width = $(window).width(),
        height = $(window).height(),
        img = $(this).prop("src");
  
    $("body").css("overflow", "hidden");
  
    $("#fondo").css({
        width: width * 2,
        height: height * 2
    });
  
    $("#salida").css({
        top: ((height / 2) - ($("#salida").height() / 2)) + $(window).scrollTop(),
        left: ((width / 2) - ($("#salida").width() / 2)) + $(window).scrollLeft(),
        background: "url(" + img + ")"
    });
  
    $("#fondo, #salida").slideDown("slow");
});
​
$("#fondo").click(function(){
    $("#fondo, #salida").slideUp("slow", function(){
        $("body").css("overflow", "auto");
    });
});
Output 300px

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

Dismiss x
public
Bin info
Alexis88pro
0viewers