Search code examples
htmlcssimagevertical-alignment

Image alignment in dynamic layout

I'm currently working on a blog layout and have hit a wall trying to figure out the best way to achieve the image alignment.

Each blog post has two images; a 'background' image set to .5 opacity and second 'top' image set to 1 opacity. The background image needs to sit under the top image.

So far I have got the layout to this point here http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html but cannot figure out how to get the background image under the top image, leaving a 160px distance between the top image and the background image - in a way that can accommodate undetermined image heights. This html/css will eventually be used in a Wordpress theme so the solution needs to accommodate user added images that will have different heights.

An image of what I am trying to achieve is here http://dev.thefold.com.au/sandbox/staggered/reworked.png

Any ideas on how to do this?

Solution

  • Okay, see here:

    .bk-effect {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.bk-effect img:first-child {
  position: relative;
  z-index: 10;
}

.bk-effect img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: -160px; /* How much down of the original image */
  right: -150px;  /* How much right of the original image */
}
    <div class="bk-effect">
  <img src="https://placehold.it/400x300/000">
  <img src="https://placehold.it/400x300/000">
</div>

    To reuse it:

    • Copy the CSS over
    • Make a div with the class bk-effect
    • The first image used as the main image
    • The last image will be used as the background image

    Currently, the images will be offset by 160px down and 150px to the right. You can change these values by altering the relevant line below.

    Note: I added font-size: 0; line-height: 0; to remove any space under the image. This allows the offset to be exact, but it also means that no text will display inside the .bk-effect element.

    For the link provided, change the code to:

    .img-portfolio > a {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  padding-right: 50px;   /* How much right of the original image */
  padding-bottom:160px; /* How much down of the original image */
  width: 85%; /* Move the 85% to here */
}

.img-portfolio > a img:first-child {
  position: relative;
  z-index: 10;
  box-sizing: content-box;
  width: 100%; /* Remove the 85% here and move it up */
}

.img-portfolio > a img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 0;
  box-sizing: content-box;
}

    Note: You can't change the width of the main image, of the offset on the right side is going to be off. Instead, change the width of the a link.