Center images on mouse hover

Question

I have a few tables next to each other (3 tables in row 1, 3 tables row 2 and 1 table row 3) and when I hover over table cells, some images should show in the center of the screen. This is what it currently looks like (switch to full page):

 function imageAppear(id) { document.getElementById(id).style.visibility = "visible"; document.getElementById('lightBox').style.visibility = "visible"; } function imageDisappear(id) { document.getElementById(id).style.visibility = "hidden"; document.getElementById('lightBox').style.visibility = "hidden"; } 

 .tool2 { border-collapse: collapse; border-spacing: 0; margin-left: 20px; } .tool2 td { width: 1%; font-weight: bold; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 th { width: 1%; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; padding: 5px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 .border { font-family: Arial, Helvetica, sans-serif !important; ; border-color: #333; text-align: center } .tool2 .header { font-family: Arial, Helvetica, sans-serif !important; ; background-color: #333; color: #ffffff; border-color: #000000; text-align: center } .wrapper { position: relative; z-index: 1; width: 100%; height: 50vh; } 

 <div class="wrapper" style="width: 33%; height: 150px; float:left;"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 1</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr1')" onmouseout="imageDisappear('ocr1')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr1" style="z-index: 100; position: absolute; transform: translate(-50%, -50%);visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe1')" onmouseout="imageDisappear('fe1')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe1" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px;float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 2 </th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr2')" onmouseout="imageDisappear('ocr2')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr2" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe2')" onmouseout="imageDisappear('fe2')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe2" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px; float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 3</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr3')" onmouseout="imageDisappear('ocr3')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr3" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe3')" onmouseout="imageDisappear('fe3')">Field extract <img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" %} " alt="UI_FE " id="fe3" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; " /></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 4</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr4') " onmouseout="imageDisappear('ocr4') ">OCR<img src="" alt="Ui_OCR " id="ocr4" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe4') " onmouseout="imageDisappear('fe4') ">Field extract<img src="" alt="UI_FE " id="fe4" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 5</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr5') " onmouseout="imageDisappear('ocr5') ">OCR<img src="" alt="Ui_OCR " id="ocr5" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe5') " onmouseout="imageDisappear('fe5') ">Field extract<img src="" alt="UI_FE " id="fe5 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 6</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr6') " onmouseout="imageDisappear( 'ocr6') ">OCR<img src="" alt="Ui_OCR " id="ocr6" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe6') " onmouseout="imageDisappear('fe6') ">Field extract<img src="" alt="UI_FE " id="fe6 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 7</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr7') " onmouseout="imageDisappear('ocr7') ">OCR<img src="" alt="Ui_OCR " id="ocr7" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe7') " onmouseout="imageDisappear('fe7') ">Field extract<img src="" alt="UI_FE " id="fe7 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left; "> <table class="tool2 " style="width: 90%; "> <tr> <th class="header " colspan="5 ">Table 8</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr8') " onmouseout="imageDisappear('ocr8') ">OCR<img src="" alt="Ui_OCR " id="ocr8" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> <td class="border " onmouseover="imageAppear('fe8') " onmouseout="imageDisappear('fe8') ">Field extract<img src="" alt="UI_FE " id="fe8 " style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; "/></td> </tr> </table> </div> <div id="lightBox " class="light-box "></div> 

But I am facing some problems:
1. I can't seem to figure out how to edit the <img> style values to position the shown images in the center of the screen, starting at the current scroll position, no matter from which table cell the image is shown.
2. The page is adding so much blank space at the bottom to make room for the images. Is there a fix for this?
3. I use the lightBox as an element to grey out the webpage behind the image. The complete page gets greyed out besides the tables themselves, but I can't figure out why that is.

Answer 1

Your inline CSS are not same on 2 OCR td tags. That's the reason you are having this issue.

 function imageAppear(id) { document.getElementById(id).style.visibility = "visible"; document.getElementById('lightBox').style.visibility = "visible"; document.getElementsByClassName("wrapper")[0].style.position = "static"; } function imageDisappear(id) { document.getElementById(id).style.visibility = "hidden"; document.getElementById('lightBox').style.visibility = "hidden"; document.getElementsByClassName("wrapper")[0].style.position = "relative"; } 

 .tool2 { border-collapse: collapse; border-spacing: 0; margin-left: 20px; } .tool2 td { width: 1%; font-weight: bold; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 th { width: 1%; font-family: Arial, sans-serif; font-size: 16px; font-weight: normal; padding: 5px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; border-color: black; } .tool2 .border { font-family: Arial, Helvetica, sans-serif !important; ; border-color: #333; text-align: center } .tool2 .header { font-family: Arial, Helvetica, sans-serif !important; ; background-color: #333; color: #ffffff; border-color: #000000; text-align: center } .wrapper { position: relative; z-index: 1; width: 100%; height: 50vh; } 

 <div class="wrapper" style="width: 33%; height: 150px; float:left;"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 1</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px;float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 2 </th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> </tr> </table> </div> <div class="wrapper" style="width:33%; height: 150px; float:left"> <table class="tool2" style="width: 90%"> <tr> <th class="header" colspan="5">Table 3</th> </tr> <tr> <td class="border" colspan="2">Invoices</td> <td class="border" rowspan="2">E-Mail</td> <td class="border" rowspan="2">Sentiment Analysis</td> <td class="border" rowspan="2">CRM</td> </tr> <tr> <td class="border" onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" alt="Ui_OCR" id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;" /></td> <td class="border" onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe')">Field extract <img src="https://cdn.theatlantic.com/assets/media/img/posts/NbYbNrs.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 200px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 4</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr') " onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear( 'fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 5</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr')" onmouseout="imageDisappear('ocr')">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear('fe')">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE" id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 6</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear('ocr')" onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe')" onmouseout="imageDisappear('fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div class="wrapper " style="width:33%; height: 150px;float:left "> <table class="tool2 " style="width: 90% "> <tr> <th class="header " colspan="5 ">Table 7</th> </tr> <tr> <td class="border " colspan="2 ">Invoices</td> <td class="border " rowspan="2 ">E-Mail</td> <td class="border " rowspan="2 ">Sentiment Analysis</td> <td class="border " rowspan="2 ">CRM</td> </tr> <tr> <td class="border " onmouseover="imageAppear( 'ocr') " onmouseout="imageDisappear( 'ocr') ">OCR<img src="{% static "home/Screenshots/UiPath/InvToExcel.png" %} " alt="Ui_OCR " id="ocr" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> <td class="border " onmouseover="imageAppear('fe') " onmouseout="imageDisappear( 'fe') ">Field extract<img src="{% static "home/Screenshots/UiPath/InvToExcel_Extract.png" %} " alt="UI_FE " id="fe" style="z-index: 100; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: hidden;"/></td> </tr> </table> </div> <div id="lightBox" class="light-box "></div> 

By the way, id is a unique identifier so don't assign the same id on the multiple tags. If like to assign the same then add as a class instead of id