I have a series of three horizontal images. When hovering over each of these images, a tool-tip image is displayed. However, I am encountering an issue with resizing the tool-tip image. If I try to reduce the height and width of the tool-tip image, only a portion of the image is visible. The entire image should be displayed on hover, but this is not happening. Can someone please assist me with this?
Below is the HTML code:
<table style="width:100%" id="thumbs">
<tr>
<td><span style="cursor:pointer" id="tooltip1"><img id="img1" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/OpenIcon.png"/></span></td>
<td><span style="cursor:pointer" id="tooltip2"><img id="img2" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/ColsedIcon.png"/></span> </td>
<td><span style="cursor:pointer" id="tooltip3"><img id="img3" width="80" height="80" src="http://54.174.50.242/theme/frontend/foxplus/style/default/image/layout/SecretIcon.png"/></span> </td>
</tr>
</table>
CSS code :
tr span {
display: block;
position: relative;
}
tr span:hover {
z-index: 1;
}
tr span:hover:after {
content:"";
background-image: url('http://lorempixel.com/273/274/');
position: absolute;
top:50%;
left: 50%;
width: 273px;
height: 274px;
}
Please can someone offer guidance on this matter?
Here is the JS Fiddle link: Demo