I am facing a problem while coding my own WordPress theme. I have featured images of each blog posts displaying on my home page. I would like to make it look like a gallery. So I want the images to display under each other and next to each other, though they are different sizes. See the picture to see how far I’ve come:

picture

So what I want to accomplish is, to display the blossom image under the New York one, and next to the ‘c’est la vie’ one. Is there any way to that?

I would really appreciate your help!
My HTML code:

<div class="post">

   <div class="outer-wrapper">
      <div class="imagefilter">
         <a href='<?php the_permalink(); ?>'><?php 
 the_post_thumbnail('mythumbnail');?></a>
       </div>

          <div class="text-wrapper">
          <span class="blogpost"><h2 class="post-title"><a href="<?php 
          the_permalink(); ?>"><?php the_title(); ?></a></h2></span>
       </div>   
    </div>

  </div>

My CSS looks like this:

.outer-wrapper {
  position: relative;
  width: 470px;
  height: 100%;
  margin: 0px;
   padding: 0px;
  float: left;}


 .text-wrapper {
  position: absolute;
  width: 470px;
  text-align: center;
  font-size: 12px;
   display: table;
  top: 50%;
  height: 100%;
   line-height: 0px;
  opacity: 0;}

Read more here: Placing different sizes images underneath each other


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: