PwQvNp

index.html

<nav class="boxes">
  <a v-repeat="post: related" href="#" style="background-image: url({{post.image || random()}})"> <h4>{{post.title}}</h4> </a>
</nav><!-- .boxes -->

PwQvNp.markdown

PwQvNp

A Pen by David Rogers on CodePen.

License.

script.js

new Vue({
  el: '.boxes',
  data: {
    related: [
      { title: 'A Post Title',
        image: loremPixel()
      },
      { title: 'Another Post',
      },
      { title: 'A Post with a Really Long Title',
      },
      { title: 'Yep, another post.',
      }
    ]
  },
  methods: {
    random: loremPixel
  }
})

function loremPixel(){
  return 'http://lorempixel.com/400/400/abstract?' + Math.floor(Math.random() * 1000);
}

style.scss

.boxes {
  width: 100%;
  
  a {
    color: white;
    background-image-size: cover;
    
    display: block; float: left;
    position: relative;
    
    width: 25%; padding-bottom: 25%;
    
    h4 {
      font-size: 200%; text-align: right;
      position: absolute; bottom: 0;
    }
  }
  a:before {
    content: ' ';
    display: block;
    background-color: red;
    opacity: 0.4;

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
  a:hover:before {
    opacity: 0; transition: opacity 0.5s;
  }
}