Have you noticed on some sites that when you view it on Firefox compared to Internet Explorer it seems to look better, the reason behind this could be CSS3 support.

CSS3 support allows a web designer to create a wide range of extra effects to be applied which CSS2 never did. Effects including curves and shadows.

JQuery will allow a lot of these effects to be applied on a CSS2 based browser like Internet Explorer but you are still restricted to what you can do and requires additional modules to be installed and ends up taking a lot longer to do it.

Microsoft have announced that CSS3 support will appear in Internet Explorer 9, but we’ll wait and see if full support is actually added.

Want to know about CSS3? More information on CSS3 is available at http://www.css3.info/

Well take a look at this page at jQuery Wisdom …

http://www.jquery.wisdomplug.com/jquery-plugins/jquery-animation-effects-plugins-jquery-plugins/amazing-jquery-hover-effects/ - “Interactivity is the heart of your website. Let hovers effects communicate and interact with the users. This collection of my handpicked amazing jQuery Hover effect plugins and tutorials will help you bring great interactivity and usability into your website.”

It works well as a header slideshow except when you want to put a logo on it – the first idea would be to just put the logo on the actual images – but this requires you to do it on all images, and future images, if you decide to change the images at a later date.

A solution is to overlay the image using a transparent image ……

After the <div></div> which adds the images add …

<div class=”logo”>
    <img src=”images/logo.png”>
</div>

Note: Make sure the logo image file is the same size as the images in the slideshow.

Now style the new class with the following …

.logo {
    height: 175px;
    width: 960px;
    overflow: hidden;
    z-index: 10;
    position: relative;
    top: -175px;
}

Note: Make sure that the height, width and top match the height and the width of the slideshow.

Examples of this …

http://www.graemehowefencing.co.uk/
http://www.svlhire.co.uk/home.html

As their website says …

“The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.”

… and its very simple to install …

Add the javascript …

<script type=”text/javascript” src=”jquery/jquery.min.js”></script>
<script type=”text/javascript” src=”jquery/jquery.cycle.all.2.72.js”></script>

 Add the images …

<div class=”pics”>
            <img src=”images/o1.jpg” width=”200″ height=”200″ />
            <img src=”images/o2.jpg” width=”200″ height=”200″ />
            <img src=”images/o3.jpg” width=”200″ height=”200″ />
</div>

And add the jquery …

$(‘#pics’).cycle();

That’s the basic idea - view their website for more advanced features and variables.
http://malsup.com/jquery/cycle/