Hovering over image and making it bigger

Question

.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

There is no element with class=thumbnail on the page you linked. — Vanquished Wombat, Dec 21 '16 at 22:46
we also use .banlistframe { -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75); } for the banlist but it seems this doesnt get loaded or something anymore once we have the other css with the :hover — Stevenn, Dec 21 '16 at 22:46

score 1 · Answer 1 · answered Dec 21 '16 at 22:46

1

Write:

width:500px !important;

and also

height:auto !important;

This will work and this make your CSS not overridden by other CSS

answered Dec 21 '16 at 22:46

BetaDev

4,516
3
21
47

score 1 · Answer 2 · answered Dec 21 '16 at 22:48

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;
}

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

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;

Check this out

edited May 23 '17 at 12:24

Community

1
1

answered Dec 22 '16 at 03:56

can you check my answer – Dec 22 '16 at 04:52

Hovering over image and making it bigger

3 Answers3