Getting Started with Vue.js

Styling Gifs and Author Overlays

Now that we are able to show our gifs, let's add some formatting and styling so that they look nice in a grid. We'll be working in the 11 - Gif Overlays folder.


Let's upgrade our template so that we are able to:

  • link to the gif
  • show gif author
  • link to gif author
 <!-- our template -->
  <section id="app" class="section container">    

   <!-- create our grid -->
    <div class="columns is-multiline" v-if="gifs">
      <div class="column is-one-quarter" v-for="gif in gifs">

        <!-- the gif box -->
        <div class="gif-box">
       <!-- gif image and link -->
          <a :href="gif.url">
            <img class="gif-image" :src="gif.images.original.url">

      <!-- gifs author -->
              <img :src="gif.user.avatar_url" height="40" width="40">
              {{ gif.user.display_name }}



A lot of this is for Bulma classes to get us our nice grid. The main thing we are looking at is the gif-box where we generate a nice box for each gif.

You can also see gif-user is where we will show the gif's author and their profile link.


Next, let's add some CSS so we can overlay the gif-user over the image.

    .gif-box {
        position: relative;
        background: #333;
    .gif-user   {
        display: flex;
        align-items: center;
        position: absolute;
        left: 15px;
        bottom: 15px;
    .gif-user img {
        margin-right: 8px;

Now our gifs have author overlays and are in a grid!

Like this article? Follow @chrisoncode on Twitter