top



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. Razz


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.Smile
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" />
CSS
Code:
#abc {
  background: transparent;
}
#abc:hover {
  background: #000;
}

Edit: Whoa, why's it not working here...
If it's not working for you, try copying the code below and paste them in the textarea here.
Code:
<style>
#abc {
  background: transparent;
}
#abc:hover {
  background: #000;
}
</style>
<img id="abc" src="http://a.imageshack.us/img408/1323/gamesg.png" />

Hope this is what you're finding.

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");
}
and name your image as:
Code:

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

Oh okay. got it. Wink 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 Happy