Code overlapping category link

Hey guys, I used a code that lets text show up on a picture if you hover your mouse over it.
I made it 100px high, just as high as the picture is, only the code is overlapping the next category link so you can't access the second category. Can anyone edit the code so it will get normal?

Forum:
http://neejaa.actieforum.com/forum

Code used:

Code:

<style type='text/css'>.bk { opacity: 0;  width:497px; height:100px; transition-duration: 0.9s;  -moz-transition-duration: 0.9s;  -webkit-transition-duration: 0.9s;  -o-transition-duration: 0.9s; }.bk:hover { background-color:#000000; opacity:.40; }.bke { margin-top:4px; width:497px; height:100px; background-color:fafafa; }.bkg { padding:0px; margin-top: 25px; height:100px; overflow:auto; font-family:tahoma; color::bdb6b8; text-align:justify; }.bkh { }</style><center><div style="width:497px; height:100px; background-image:url(http://i42.tinypic.com/25h0pkm.png);"><div class="bk"><table cellspacing="2" cellpadding="5"><tr><td valign="top"><div class="bke"><div class="bkg">
<center>Jazeker mensen, jazekerheid.</center></div></div ></td></tr></table></div></div></center>

Hi Dustfire,

Try putting this in your CSS:
Admin Panel > Display > Pictures and Colors > Colors > CSS stylesheet

Code:

.bkg{
margin-top:-10px;
margin-left:-6px;
width:496px;
height:98px;
}

If the above doesn't work try this:

Code:

.bkg{
margin-top:-10px !important;
margin-left:-6px !important;
width:496px !important;
height:98px !important;
}

I believe the problem may be with your class name "bkg". Did you insert any CSS in your stylesheet for this? This is the result I'm getting during inspection: https://i.servimg.com/u/f74/18/21/41/30/ex210.png If the code I provided above works it should look like this: https://i.servimg.com/u/f74/18/21/41/30/ex12.png

It worked, thank you so much *hug*

You're welcome, I'm happy to have helped.