Show several div on hover - html

Question

I have 4 divs and 4 images and each of them has an ID. I need to show another div when you hover the first div's image.
I wrote this code but only the first image with ID="insta2" and div ID="iinsta2" worked.
<style type="text/css">
#insta1{display:none}
#insta2{display:none}
#insta3{display:none}
#insta4{display:none}
#iinsta1:hover + #insta1 {
display: block;
}
#iinsta2:hover + #insta2 {
display: block;
}
#iinsta3:hover + #insta3 {
display: block;
}
#iinsta4:hover + #insta4 {
display: block;
}
</style>
And body:
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1"><p> Hover 1 </p></div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2"> <p> Hover </p></div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta3"><p> Hover 3 </p></div>
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta4"> <p> Hover 4 </p> </div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
</td>
</tr>

Answer 1

Use this way:
#insta1,
#insta2,
#insta3,
#insta4 {
display: none;
}
#iinsta1:hover + #insta1,
#iinsta2:hover + #insta2,
#iinsta3:hover + #insta3,
#iinsta4:hover + #insta4 {
display: block;
}
<table>
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1">
<p>Hover 1</p>
</div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2">
<p>Hover</p>
</div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta3">
<p>Hover 3</p>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
<div id="insta4">
<p>Hover 4</p>
</div>
</td>
</tr>
</table>
The + object can be used only with siblings that are next. Also, I have reduced your CSS. Please use absolute positions for positioning the :hovers. And, if you wanna maintain the HTML layout, you need to use JavaScript for this.

Answer 2

img ~ p {
visibility: hidden;
}
img:hover ~ p {
visibility: visible;
}
<table border=1>
<tr>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
</tr>
</table>
The example here seems complicated so I boiled it down to what I understood the question to be. I hope this helps. Feed back is welcome.