效果图如下所示：

先抛出代码给急用的童鞋参考：

知识点有两个：

1. v-for遍历渲染图片控制显示和隐藏（不用看css）
2. 鼠标悬浮图片出现灰膜 (css控制)

注意：只放了css的重要代码

 <section class="feature-area section-padding">
      <div class="container">
        <h2>图文教程</h2>
        <div class="row">
          <div class="buy-item" v-for="(ele,i) in piclist" :key="i" @mouseenter="enter(i)" @mouseleave="out(i)">
            <div class="pic-title" :style="{'backgroundImage': 'url('+ele.bg+')','background-repeat':'no-repeat','background-size':'cover','background-color':'#faf8ec' }"><img :src="ele.img" v-show="imgindex===i"></div>
            <div>
              <p class="pic-text"  style="line-height: 30px">{{ele.text}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

data () {
      return {
        imgindex: '',
        piclist: [
          {text: '播放/录制页面', bg: require('../../static/assets/images/pic-1.png'), img: '../../static/assets/images/pic-11.png'},
          {text: '视频录制设置', bg: require('../../static/assets/images/pic-2.png'), img: '../../static/assets/images/pic-21.png'},
          {text: '自定义资源管理', bg: require('../../static/assets/images/pic-3.png'), img: '../../static/assets/images/pic-31.png'},
          {text: '相机设置', bg: require('../../static/assets/images/pic-4.png'), img: '../../static/assets/images/pic-41.png'},
          {text: '抠像设置', bg: require('../../static/assets/images/pic-5.png'), img: '../../static/assets/images/pic-51.png'},
          {text: '遮罩设置', bg: require('../../static/assets/images/pic-6.png'), img: '../../static/assets/images/pic-61.png'}
        ]
      }
    }

  methods: {
      enter: function (i) {
        if (this.imgindex === i) {
          this.imgindex = -1
        } else {
          this.imgindex = i
        }
      },
      out: function (i) {
        this.imgindex = -1
      }
    }

css控制鼠标悬浮出现灰膜：

 .pic-title {
    height: 75%;
  }
  .pic-title:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:75%;
    background:rgba(0,0,0,0.4);
    z-index:1;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    border-radius: 7px 7px 0 0;
  }
  .buy-item:hover>.pic-title:after {
    opacity: 100;
    filter: alpha(opacity=0);
    cursor: pointer;
  }

搞定！ 上面代码有问题或者没实现可在下方留言哦！