鼠标悬停时弹出图像

Question

I had an image of a play button on my webpage I'm building with HTML but I have added some code and it has changed the image to a square or it created an image over my play button of a square.

How do I rectify that and get the code to apply to my play button image?

Also I want the image to pop outward when I hover the mouse over it, instead right now it goes inward.

HTML

<a class="thumbnail" <IMG STYLE="position:absolute; TOP: 516px; LEFT:1233px; WIDTH:130px; HEIGHT:130px" SRC="play button.png"</a>

JQUERY

$('.thumbnail').mouseover(function() {
 $('.thumbnail').removeClass('hover');
 $(this).addClass('hover');
});

CSS

.thumbnail:hover, .thumbnail.hover {}
.thumbnail:hover span, .thumbnail.hover span {}

Answer 1

your html is not valid, silly.

<a class="thumbnail">
<IMG STYLE="position:absolute; TOP: 516px; LEFT:1233px; WIDTH:130px; HEIGHT:130px" SRC="play-button.png">
</a>

that should fix it

Answer 2

I'm not sure if I understand what you're looking for, but here's some VALID HTML and a working pop out on hover which you can adjust to your needs:

<a class="thumbnail">
    <img src="http://randolph.k12.nc.us/schools/whs/buttons/teal-button-png.png" alt="" />
</a>

CSS goes like this (and edit at will):

.thumbnail:hover:after{content:'Hello!';background:#fc0; width:300px; height:100px; position: absolute; z-index:2; top:20px; left:30px;

}
.thumbnail:hover span, .thumbnail.hover span {
}
img {
    position:absolute;
    top: 0px;
    left:0px;
    width:200px;
    height:130px
}

and you can see the fiddle here . Your JS isn't needed at all.

As we're at it, please pay attention on the use of the img tag, and don't use spaces in file names.