How To Make This Swap Image Code Working In Wordpress

ok, I created a portfolio page on the base of this nice tutorial: http://designshack.net/articles/css/swap-your-pages-background-image-on-navigation-hover/ but because it is based

Solution 1:

You don't need JS: you just need your PHP code to output an HTML with the same structure as the one in the example. What WP template is this PHP code from: page.php? For the last image, you need to add an extra <img> tag outside of the loop and the nav tag, that will always show even if no links are hovered.

First post as static:

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=1; $i<count($loop->posts); $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[0]->ID );
</div>

Last post as static:

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
        $loop = new WP_Query( $args );
        for($i=0; $i<count($loop->posts)-1; $i++ ) {
            echo '<li>'.
                 '<a href="' . get_permalink( $loop->posts[$i]->ID ) . '">' . $loop->posts[$i]->post_title . '</a>'.
                 get_the_post_thumbnail( $loop->posts[$i]->ID ).
                 '</li>';
        }
    </ul>
  </nav>
  <?php get_the_post_thumbnail( $loop->posts[count($loop->posts)-1]->ID );
</div>