I'm attempting to display a larger image when hovering over a thumbnail using jQuery and CSS. I have two images like this
<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>
and the corresponding CSS
.full-image {
display: none;
z-index: 99999;
top: 10%;
width: 600px;
height: auto;
right: 34%;
}
When hovering over .thumbnail, this function is triggered
onImageHover = ->
$("#snapshots_datatables").on "mouseover", ".thumbnails", ->
nextImage = $(this).siblings(".full-image")
$(nextImage).css({"top": "10%"})
nextImage.show()
$("#snapshots_datatables").on "mouseout", ".thumbnails", ->
nextImage.hide()
The issue I'm facing is that I want to show the image with a height of 600 on hover over .thumbnail but centered on the screen regardless of size or scrolling position. Any assistance would be greatly appreciated as I've had no success in adding CSS myself.
EDIT: Similar to a bootstrap modal where even if clicked at the very bottom of the screen, it appears in the center.