Getting Started with Vue.js: Lesson 17 of 25

Styling Gifs and Author Overlays

Up Next

Searching Gifs

Autoplaying in 7 seconds!


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.

Table of Contents

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

    The CSS

    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!

    Chris Sevilleja

    173 posts

    Co-founder of Slapping the keyboard until something good happens.