Image hover effect for wordpress help

Hello
I am customising a wordpres theme and need help on how to apply a mouse over/fading effect on images ( links) the site which I purchased the theme does not offer support on customisation.

I would also like to add I am using a image plugin for inserting my images
would appreciate all help and support
tnx

Hi,

It shouldn’t be too hard to add a mouseover effect with a little bit of JavaScript and/or CSS.
Could you provide a link to a page where I can understand a little better what you are trying to do.

thank you for your reply. I’m looking at applying a similar effect to the example page below:

pls see section under sync, developer, mobile etc

Hi again,

These are called dropline menus and aren’t too hard to implement.
Here are two good tutorials:

http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/

The second one is probably more like what you are looking for. Currently you need to click to have the text change, but it shouldn’t be too hard to modify its behaviour so that it displays on hover instead.

By way of a further example, have a look at this very simple demo I made:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery hover</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      #container1{width:150px; height:150px;background:green; margin:5px; float:left;}
      #container2{width:150px; height:150px;background:yellow; margin:5px; float:left;}
      #container3{width:150px; height:150px;background:red; margin:5px; float:left;}
      #text{clear:both;width:460px; border:1px solid;black; margin-left:5px;padding:5px;}
    </style>
  </head>
  
  <body>
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="text">Watch this space</div>
    <script>
      $(document).ready(function() {
        t = $("#text");
        $("#container1").hover(function(){ t.text("You last hovered over the green div").fadeIn("slow")});
        $("#container2").hover(function(){ t.text("You last hovered over the yellow div").fadeIn("slow")});
        $("#container3").hover(function(){ t.text("You last hovered over the red div").fadeIn("slow")});
      });
    </script>
  </body>
</html>

If this suits your needs, we could spice it up a little with some fade in / fade out effects