показ изображения в центре экрана css jquery

Question

Я пытаюсь показать большое изображение при наведении миниатюры в jquery и CSS. У меня есть 2 изображения, как

 <td> 
     <% if camera["is_public"] == "t" %> 
      <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="32" class="thumbnails"> 
      <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="600" class="full-image"> 
     <% else %> 
      <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="32" class="thumbnails"> 
      <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="600" class="full-image"> 
     <% end %> 
     </td> 

и CSS, как

.full-image { 
    display: none; 
    z-index: 99999; 
    top: 10%; 
    width: 600px; 
    height: auto; 
    right: 34%; 
} 

на зависший .thumbnail утра запуска этой функции

onImageHover = -> 
    $("#snapshots_datatables").on "mouseover", ".thumbnails", -> 
    nextImage = $(this).siblings(".full-image") 
    $(nextImage).css({"top": "10%"}) 
    nextImage.show() 

    $("#snapshots_datatables").on "mouseout", ".thumbnails", -> 
    nextImage.hide() 

вся моя проблема заключается в том, что я хочу, чтобы показать height: 600 изображение на зависший .thumbnail НО в центре экрана относительно размера экрана и прокрутки. Даже прокручивание вниз изображения должно появиться в центре экрана. любая помощь будет оценена. Мне не повезло в добавлении CSS самостоятельно.

EDIT: то же, что и модель начальной загрузки, даже щелкнув по экрану, но она отображается в середине экрана.

Answer 1

Вам не нужен javascript для этого. Я думаю, css будет делать трюк.

Сначала вы хотите убедиться, что .full-изображение всегда находится в центре экрана.

.full-image { 
    position: fixed; 
    width: 600px; 
    height: 600px; 
    left: 50%; 
    top: 50%; 
    margin-left: -300px; 
    margin-top: -300px; 
    background: red; 
    display: none; 
} 

Затем вы хотите, чтобы сделать вид при наведении на .thumbnail

.thumbnail:hover .full-image { 
    display: block; 
} 

Вот рабочий пример
http://codepen.io/Jeffersonvdh/pen/GZBMBQ