How to blend images and aling them by center using CSS3 or Jquery?

Question

I have two lists of images. Every image in the first list has a pair in the second. All images has the same size. Like this:

My task is to blend every pair of images and align them by center. Every image is transparent png, so it should drop a complex shadow.

The problem is, I don't fully understand how to do it. For now I did it that way:

  .center
  {
    width: 1280px;
    height: 410px;
    margin: auto;
  }
  .building-img
  {
    width: 600px;
    #background-color: #F8F8FF;
    #box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 1;
    position: relative;
    left: 300px;
    margin-top: 10px;
  }
  .route-img
  {
    width: 600px;
    z-index: 2;
    position: relative;
    right: 304px;
    margin-top: 10px;
  }  
  .filter-drop-shadow {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    }


<div class="center">
            <img class="building-img filter-drop-shadow" src="img1.png" />
            <img class="route-img filter-drop-shadow" src="img2.png" />
</div>

Although it looks like it should work well, it does not. Because I used position attribute, images blend as I need, but they has a hidden areas which does not let me scale a web page without losing a center aligning. So, is there any way to do it as I need? Blend images, drop shadow and align them by center.

Answer 1

Easiest way is to position them via absolute.

HTML:

<img src="http://i.stack.imgur.com/4aDqe.png" id="img1">
<img src="http://i.stack.imgur.com/SEdhL.png" id="img2">

CSS:

#img1 , #img2 {
    position: absolute;
    width: 500px;
    height: 400px;
}