<template>
  <div class="img-container" :style="style">
    <div>{{text}}</div>
  </div>
</template>

<script>
export default {
  name: 'ImgContainer',
  props: {
    text: {
      type: String,
      required: true,
    },
    src: {
      type: String,
      required: true
    }
  },
  computed: {
    style() {
      const img = require(`@/assets/images/${this.src}`)
      return {
        'background-image': `url(${img})`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.img-container
  width 100%
  height 100%
  background-size cover
  position relative
  cursor pointer
  div
    position absolute
    left 0
    right 0
    bottom 0
    height 2rem
    line-height @height
    background rgba(0,0,0,0.5)
    color #eee
    font-size 0.8rem
    text-indent .4rem
    transition all .3s
  &:hover
    div
      height 100%
      display flex
      align-items center
      justify-content center
</style>
