Support » Themes and Templates » How to reproduce this hover effect?

  • I am brand new to WordPress, and am trying to convert a client’s site to WordPress. How can I recreate the hover effect that I have on the homepage of this site:

    I understand I should setup the navigation using the Pages feature and calling pages with PHP, but how would I have those hover graphics?


Viewing 7 replies - 1 through 7 (of 7 total)
  • I would do something like create a series of Div’s, each positioned in the same location using CSS position: absolute and display: none Thus they would not be visible but already existing.

    Use Javascript or jQuery to add a class when a link is hovered over, so the hidden div associated with that link has display: block added to its CSS, and it displays. As soon as the mouse stops hovering it reverts back to display: none and is not visible. You also must set a z-index on the displayed div so it overlays the content beneath it.

    That can’t be the easiest way to do it? Does WordPress really restrict CSS tricks like this?

    What’s wrong with the way you’re doing it on the site linked above?

    It’s only HTML and CSS, why not re-use what you have? …

    t31os – The problem is I am using WordPress to create a list based on the Categories that I have defined in WordPress. The way I have it doesn’t use WordPress and it is just a navigation built by hand.

    Hi – That doesn’t make any difference that its nav built by hand.

    the WordPress function wp_list_pages assigns a unique classname to every nav item listed – for example, page-item-130

    In your current CSS you have something unique going on for every button that is hovered over, because each one displays a different window. So you must already have a unique ID # or classname for all your nav items.

    So you would just change the CSS to trigger from page-item-130 instead of whatever ID or class you now have on, for example, the 3rd nav button from the left. Its the same CSS, you just trigger from a different class or ID name. This assignment of classnames is all built into the WordPress list pages routine. There is nothing you need to do to make it happen.

    Do you use Firebug? If so you can see in the left pane the unique classnames that WordPress assigns to each nav item.

    stvwlf – Thats a great idea. I currently am using a span. Here is the code:

    #backflownav li a span {display:none;}
    #backflownav li a:hover span {display:block; position:absolute; top:52px; left:45%; margin:0 0 0 -100px;}

    <li><a href="mission.html">Mission<span><img src="images/frame1.gif" width="762" height="335" /></span></a></li><li><a href="services.html">Services<span><img src="images/frame3.gif" width="762" height="335" /></span></a></li>


    If you use, say, wp_list_pages, you are not going to be able to insert the <img> into the link because WP just doesn’t do that.

    Some choices are:
    1) continue using hand-coded Nav (and I see nothing wrong with that – your pages are pretty static and won’t be changing often)

    2) here is a plugin that lets you add spans into the default code that wp_list_pages creates
    Instead of inserting the image in the HTML do it this way:

    If this code is in the theme’s header.php file I’d assign a conditional class to the <body> tag depending on what page is being displayed (this functionality will be built into WP 2.8). Example:
    in header.php before the <body> tag

    $class = '';
    if (is_front_page()) {     // indicates displaying home page
      $class = "home";
    } elseif (is_page('mission')) {
      $class = "mission";
    } elseif (is_page('faq')) {
      $class = "faq";
    } ?>
    <body<?php if ($class) echo 'class="' . $class . '">'; ?>>

    That code just created, on the mission page,
    <body class="mission">

    now to your css:

    #backflownav li a:hover span {display:block; position:absolute; top:52px; left:45%; margin:0 0 0 -100px; }

    add 1 line like this for each page. This code replaces the <img> tag in the

  • item you presently have – gets applied to the span as a background image
    body.mission #backflownav li a:hover span {
      background: url(images/frame1.gif) no-repeat;
    body.faq #backflownav li a:hover span {
      background: url(images/frame_faq.gif) no-repeat;

    I’m sure you get the idea now…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to reproduce this hover effect?’ is closed to new replies.