Q: What's causing my hover image not to show it's transparency? I got this code online for making a link display a picture (hover) when someone rolls over the link.
It works however, the image that is to be displayed (.png) has a transparency but this one is replaced by a black background. If I place the image outside the code for this gallery, the transparency shows correctly so I assume it has to do with the css for the gallery. I played around with all the features that pertain to background but none seems to affect that black background that replaces the transparency of my .png.
Hope you guys can find what's causing it and how to fix it. Thanks!
CSS:
    <style type="text/css">

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
    background-color: transparent;

}


.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black; /*this is for the text*/
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

HTML:
<body>
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><p>Starck</p><span><img src="starck_transp_gun_silver.png" /><br />Text.</span></a>


</div>

</body>


A: My only guess is that you're not fixing your image correctly. Go back and ensure it is in fact a .png with a transparent background.
