.thumbnail:hover
{
position:relative;
top:-25px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
}
and
<td><img src='.$row['spy'].' class="thumbnail" style="width:64px; height:64px;"></td>
But it won't work btw I'm using Enjin I'm trying to make an image bigger on hovering over it
Write:
width:500px !important;
and also
height:auto !important;
This will work and this make your CSS not overridden by other CSS
You have to use !important on both your width and height attributes within CSS for it to override the inline styling. :-)
.thumbnail:hover{
position: relative;
top: -25px;
left: -35px;
width: 500px !important; // notice !important
height: auto !important;
display: block;
z-index: 999;
}
You should use !important to force CSS to override the other style.
When using auto it resets the element back to default height.
Try using this:
width: 500px !important;
height: auto !important;