Menu
Hi,
I’m working on a code that I am not too familiar with (I am not big on CSS, and it was passed down to me), and I should add a flash animation to it.
It’s three boxes that have each an image in them. There is text (link) in each box too.
I would like to make the hover on the image, or if not possible, on the text, pull up a small flash animation.
Basically they see the picture, but when they hover on it, the picture will slowly become brighter. I have the flash file, but have no idea how to incorporate it. I was half-able to put a hover .jpg, but when I try with a .swf file nothing happens.
Please help, and let me know if there is more of the CSS code needed. Also, please explain it to me as simply as you can. Thank you very much in advance.
This is the code:
div#mb { clear: both; float: left; width: 754px; margin: 0; padding: 0 0 5px; }
div.mb-item { display: inline; background: #ffffff; color: #747476; float: left; margin: 0 5px; padding: 0; width: 240px; }
div.mb-item div.gutter { min-height: 85px; margin: 2px; }
div.mb-item h3 { color: #000000; font-size: 130%; font-weight: bold; margin: 0; padding: 5px 10px 0; }
div.mb-item p { margin: 0; padding: 0 100px 5px 10px; }
div.mb-item a { background: transparent url(bullet.gif) no-repeat 0 50%; display: block; margin-top: 5px; padding-left:10px; }
div.mb-item-first div.gutter { background: url(firstlowerbox.jpg) no-repeat top right; }
div.mb-item-second div.gutter { background: url(secondlowerbox.jpg) no-repeat top right; }
div.mb-item-third { width: 250px; }
div.mb-item-third div.gutter { background: url(thirdlowerbox.jpg) no-repeat top right; }
div#mb div.mb-item div.item-gutter { min-height: 85px; margin: 2px; padding: 0; }
div.mb-item-first div.item-gutter { background: url(firstlowerbox.jpg) no-repeat top right; }
div#mb div.mb-item-second div.item-gutter { background: url(secondlowerbox.jpg) no-repeat top right; }
div#mb div.mb-item-third div.item-gutter { background: url(thirdlowerbox.jpg) no-repeat top right; }