CSS Styles Only Applying To First Element

I created a custom theme and it creates a image gallery in category.php that is generated when a post is created in the back end. This part works correctly except the custom classes only apply to the FIRST post (in this case image and caption underneath). The other images do not get this styling, which in this case is a centered <p> tag and a hover scale effect of the image. The source code shows the classes are on these properly and are identical to the first post. However when inspecting further it’s not actually the class to the element (even though it still has it’s class name).

Category HTML:

<div class="thumb-cap">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_sidebar( 'objects' ); ?>
      <article class="post">
        <figure>
          <a class="hover01" href="<?php the_permalink() ?>"><?php the_excerpt_rss(); ?></a>
        </figure>
          <p class="thumb-cap-text"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
      </article>
    </div><!--END THUMB-CAP-->

CSS:

figure {
  width: 100%;
  max-width:197px;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.thumb-cap a{
  text-align:center;
}

.thumb-cap figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.thumb-cap figure:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

To summarize:
.thumb-cap is on all the generated HTML elements however the actual effects only work on the first post generated.