Placing different sizes images underneath each other

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:


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 

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


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

Leave a Reply

Your email address will not be published. Required fields are marked *