<template>
    <div class="cnt">
        <div class="team">
            <div class="team-title">MEET THE TEAM.</div>
            <div class="team-person">
                <div class="person">
                    <div class="person-img-pos">
                        <div class="icon-add" v-if="isIcon">
                            <ul class="icon-add-ul">
                                <li class="icon-add-li"><a href="#"><img src="../assets/twitter.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/fb.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/ln.png" alt=""></a></li>
                            </ul>
                        </div>
                        <img src="../assets/team_1.png" class="person-img" @mouseover="mouseOver">
                    </div>
                    <div class="person-desc">
                        <div class="person-desc-name">GLORIA BROMLEY</div>
                        <div class="person-desc-job">Graphic Designer</div>
                    </div>
                </div>
                <div class="person">
                    <div class="person-img-pos">
                        <div class="icon-add" v-if="isIcon">
                            <ul class="icon-add-ul">
                                <li class="icon-add-li"><a href="#"><img src="../assets/twitter.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/fb.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/ln.png" alt=""></a></li>
                            </ul>
                        </div>
                        <img src="../assets/team_2.png" class="person-img" @mouseover="mouseOver">
                    </div>
                    <div class="person-desc">
                        <div class="person-desc-name">GLORIA BROMLEY</div>
                        <div class="person-desc-job">Graphic Designer</div>
                    </div>
                </div>
                <div class="person">
                    <div class="person-img-pos">
                        <div class="icon-add" v-if="isIcon">
                            <ul class="icon-add-ul">
                                <li class="icon-add-li"><a href="#"><img src="../assets/twitter.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/fb.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/ln.png" alt=""></a></li>
                            </ul>
                        </div>
                        <img src="../assets/team_1.png" class="person-img" @mouseover="mouseOver">
                    </div>
                    <div class="person-desc">
                        <div class="person-desc-name">GLORIA BROMLEY</div>
                        <div class="person-desc-job">Graphic Designer</div>
                    </div>
                </div>
                <div class="person">
                    <div class="person-img-pos">
                        <div class="icon-add" v-if="isIcon">
                            <ul class="icon-add-ul">
                                <li class="icon-add-li"><a href="#"><img src="../assets/twitter.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/fb.png" alt=""></a></li>
                                <li class="icon-add-li"><a href="#"><img src="../assets/ln.png" alt=""></a></li>
                            </ul>
                        </div>
                        <img src="../assets/team_2.png" class="person-img" @mouseover="mouseOver">
                    </div>
                    <div class="person-desc">
                        <div class="person-desc-name">GLORIA BROMLEY</div>
                        <div class="person-desc-job">Graphic Designer</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Team",
    data(){
        return {
            isIcon: false
        }
    },
    methods: {
        mouseOver(){
            this.isIcon = true;
        }
    }

  }
</script>

<style scoped>
.team {
    margin: 60px 0;
    font-family: 'Work Sans', sans-serif;
}
.team-title {
    font-size: 30px;
    border-left: 10px solid #DEE3E9;
    padding-left: 15px;
    margin-bottom: 30px;
}
.team-person {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.person {
    margin: 5px 0;
}
.person-img {
    height: 300px;
    width: auto;
}
.person-img:hover {
    opacity: .5;
    transition: opacity .2s ease-in;
    cursor: pointer;
    z-index: -1;
}
.person-desc {
    background-color: #E1E6EA;
    color: rgb(0, 40, 88);
    margin-top: -4px;
    padding: 15px 0;
}
.person-desc:hover {
    background-color: rgb(0, 40, 88);
    color: #E1E6EA;
    transition: all .2s ease-in;
    cursor: pointer;
}
.person-desc > * {
    margin-left: 20px;
}
.person-img-pos {
    position: relative;
}
.icon-add {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: -25px;
  z-index: 1;
}
.icon-add-ul {
    list-style-type: none;
    display: flex;
}
.icon-add-li {
    margin-right: 2px;
}
</style>