World Dezign

I believe this is using CSS hover opacity / transparency... What code would lead to the hovering over an image, then color appears behind it? I know that I have to create an image id / class. Then go to CSS and add some spice to it.

There are two ways to do this, each requires two images.
One is by having the image with the glowing background and with the image without the background. But since that I don't have those images so I can show you no demonstration.

The other one is having the image and the glowing background separately. I don't have a glowing background around so I guess I'll just use a normal color background with CSS.
Here's your image without hover effects:


But this one has:



This is your code.
HTML

Code:

<img id="abc" src="http://a.imageshack.us/img408/1323/gamesg.png" />

Code:

#abc {
  background: transparent;
}
#abc:hover {
  background: #000;
}

Code:

<style>
#abc {
  background: transparent;
}
#abc:hover {
  background: #000;
}
</style>
<img id="abc" src="http://a.imageshack.us/img408/1323/gamesg.png" />

It working on my forum on Punbb

cool now i know how to do that its pretty neat

you can add the css background property :

Code:


#test {
background-image:url("imagebackground.jpg");
}


Code:


<img id="test" src="image.jpg" />

Oh okay. got it. Is there anyway to make it look much "sleeker"? Like more transparent? I messed around with the opacity but it did not give a similar look to the picture above. o-o

Try box-shadow-ing then.

Color transparency by rgba...
Background: rgba(0, 0, 0, 0.5)
Should make an halftransparent black color