After following a tutorial on Design Shack, I created a portfolio page utilizing CSS. However, the current setup only displays an image when hovering over a title due to some limitations.
Below is the CSS code used:
.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;
}
Next, let's take a look at the WordPress code:
<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>
I want to ensure that the image from the last list item is always visible, even without hovering over any titles. Can someone assist me in achieving this with JavaScript since I am not proficient in it?