title: Overlay on hover in vue.js
body: <p>Im trying to implement displaying text when hovering over an image in vue.js but I am a bit stuck. Im trying to implement this example on an array with multiple images:
  <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade</a></p>
  
  <p>I got a pretty big vue file but here is the essential:</p>
  
  <p><strong>template:</strong></p>
  
  <pre><code>&lt;/template&gt;
  
  [...]
  
  &lt;div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item"&gt;
    &lt;router-link @mouseover.native="hovertext" :to="'/'+item.link"&gt;
      &lt;img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt&gt;  
    &lt;/router-link&gt;
  &lt;/div&gt;
  
  [...]
  
  &lt;/template&gt;
  
  </code></pre>
  
  <p><strong>script</strong></p>
  
  <pre><code>&lt;script&gt;
  export default {
    data() {
      return {
        info: [
          {
            id: 1,
            title: "Title one",
            link: "project1",
            hovertext: "project1 hover text lorem lorem lorem",
            category_data: {
              "1": "Category 1"
            }
          },
  [...]
    methods: {
      hovertext() {
        console.log("");
      },
  
  </code></pre>
  
  <p>I had some idea to try to use a method to put the text in a div under the image but then I cannot get the text to get above the image on hover. And I cannot get the method right ... Not really sure this is a good way doing it, </p>
  
  <p>I also found this codepen example:
  <a href="https://codepen.io/oliviaisarobot/pen/xzPGvY" rel="nofollow noreferrer">https://codepen.io/oliviaisarobot/pen/xzPGvY</a></p>
  
  <p>This is pretty close to what I want to do but I cannot get the text to display here either.</p>
  
  <p>I am a bit lost. Any help how to do this in vue?</p>
  
  <p><strong>---------- UPDATE ----------</strong></p>
  
  <p>I want the image boxes to stretch so they always fits the window but I seems to get a gap between my flexbox rows which I cannot seem to get rid of. You can see the white space. I attach my stylesheet. </p>
  
  <p><a href="https://i.stack.imgur.com/XTRJl.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XTRJl.gif" alt=""></a>
      .list-complete {
        display: flex;
        height: auto;
        flex-direction: row;
        flex-flow: row wrap;
      }</p>
  
  <pre><code>.list-complete-item {
    flex: 0 1 50%;
    display: inline-block;
  }
  
  .list-complete-item a {
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    outline: 1px solid #fff;
  }
  
  .list-complete-img {
    width: 100%;
  }
  
  .text {
    color: rgb(186, 74, 74);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .list-complete-item a:hover .overlay {
    opacity: 1;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    height: 60%;
    width: 100%;
    opacity: 0;
    transition: 0.5s ease;
    background-color: #008cba;
  }
  </code></pre>