how to make this swap image code working in wordpr

Question

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 on css, it has some limitations. like currently there are no image showing unless I hover a title.

here is my css:

.container_imd {
  position: relative;
  overflow: hidden;
  margin: 100px auto;
  width: 800px;
  height: 500px;
  -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}



.container_imd li img {
  position: absolute;
  top: 0;
  left: 800px;
  z-index: -50;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

/*NAV*/
.container_imd nav {
  width: 170px;
  height: 500px;
  background: #fff;
}

/*UL*/
.container_imd ul {
  width: 800px;
  height: 500px;
  list-style: none;
}

.container_imd li a {
  z-index: 1;
  display: block;
  padding-left: 20px;
  width: 150px;
  height: 30px;
  background: white;
  color: #444;
  text-decoration: none;
  font: 14px/30px Helvetica, Verdana, sans-serif;
}

.container_imd li:nth-child(1) {
  padding-top: 50px;
}

.container_imd li a:hover {
  background: #eee;
}

.container_imd li a:hover + img {
  left: 0px;
}

& here is the code from WordPress:

<div class="container_imd">
  <nav>
    <ul>
        <?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php the_post_thumbnail() ?>
      </li>
      <?php endwhile; ?> 
    </ul>
  </nav>
</div>

how can I show the image from the last list item here? so it is always visible, even if no one hover any of the title. & when someone hover any other title it ll replace the image * show the image attached with that post. I know it is possible using javascript, but I don't know javascript much. can anyone help?

Answer 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>