Overlay for images doesn't work

Question

I tried to do an overlay for images, but I have 2 problems:

$(document).ready(function () { 
  $('#boximmagini img').click(function(){
    $("#immagine img:last-child").remove()
    var source= $(this).attr('src');    
    $('#immagine').append("<img src="+source+"/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');   
  });
  $(".chiudi").click(function(){
    $('#overlay').fadeOut('fast');
    $('#box').hide();
  }); 
  $("#overlay").click(function(){
    $(this).fadeOut('fast');
    $('#box').hide();
  }); 
});

.chiudi{                 
  cursor:pointer;
}
.overlay{               
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:100;
  cursor:pointer;
}   

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index:+300; 
  position:absolute; 
  left:30%; 
  top:20%;            
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
  <div class="chiudi">CHIUDI</div><br>
  <div id="immagine"></div>
</div> 
<div id="boximmagini">
  <div><b>Clicca</b></div>
  <img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />       
</div>

PROBLEMS:

I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)

I hope that you can help me!

Sorry for my english

Thanks!

Possible duplicate: http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div ? — Sumurai8, Sep 19 '15 at 12:56
an overlay, when i click on image (smaller than original), fade in at middle of screen a box where there is image clicked but with original size. If width of window is less than image with original size, the image must resize. When box fadein, the body, overlay change color. The js script work very well, but i have those problems — Mapsism Borja, Sep 19 '15 at 12:59
@Sumurai8 read this question..... this is not possible duplicate. in this case margin: 0 auto (answer of other question) DOESN'T WORK — Mapsism Borja, Sep 19 '15 at 13:02
use media query to make it response while you resize your window — Domain, Sep 19 '15 at 13:02
You can create the img with max-height of 90vh and max-width of 90vw so it will always be smaller than the viewport — Saar, Sep 19 '15 at 13:12
Well... you can center box in the middle of the screen, but since image dimensions are different than box dimensions - image will not be centered...http://jsfiddle.net/dwm16pov/2/ You can do it however: http://jsfiddle.net/dwm16pov/3/ - for vertical centering inside box, you can add few things more... — sinisake, Sep 19 '15 at 13:24
@MapsismBorja `margin` works fine if you nest your elements correctly. To center it vertically you need to use some transform magic. — Sumurai8, Sep 19 '15 at 13:24

score 2 · Accepted Answer · answered Sep 19 '15 at 13:08

2

I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/

#box{ 
  width:600px; 
  height:400px;               
  display:none; 
  z-index: 300; 
  position:absolute; 
  top:20%;      
  left:50%;
  transform: translate3d(-50%,0,0);
}

#box img{
    position:absolute;
    left:50%;
    transform: translate3d(-50%,0,0);
}

I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions

Hope this helped you.

answered Sep 19 '15 at 13:08

Saar

2,276
1
16
14

Please note that if you nest the element correctly in the overlay, scrolling will not mess up the position of the overlayed image too. – Sumurai8 Sep 19 '15 at 13:27
now is in the middle but i have a problem look http://jsfiddle.net/vep5jdao/1/ when the window is very small also the box and so image is little. The problem is left... :/ – Mapsism Borja Sep 19 '15 at 13:38
@Saar please see my jsfiddle – Mapsism Borja Sep 19 '15 at 13:48
@MapsismBorja what do you want to happen when window is very small? – Saar Sep 19 '15 at 16:08
I would like that width of box (so also image) is like window... Maybe is there only solution with js, or also with css3? – Mapsism Borja Sep 19 '15 at 19:40

Overlay for images doesn't work

1 Answers1