Воссоздайте макет изображения Google

Я хочу воссоздать макет результата страницы Google

Когда вы нажимаете на изображение, div занимает всю ширину экрана, а в нижней части изображения, на которое нажали, появляется маленький треугольник.

A попытался поместить img в другой div, но div находился между двумя изображениями, а не под строкой, поэтому макет был очень плохим.

я пробовал это

<template>
  <div>
    <div v-for = "(item,index) in AllItem" :key = "index">
      <img :src = "item.profile_image_url" @click.prevent.stop = "clickShowInfoStream()" />
      <div v-show = "imgXL">
        <img :src = "profile_image_urlXL" class = "imgProfileXL" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "item",
  data() {
    return {
      imgXL: false
    };
  },
  methods: {
    clickShowImgXL() {
      this.imgXL = !this.imgXL;
    }
  }
};
</script>

<style scoped>
.imgProfileXL {
  background-color: #19171c;
  width: 100%;
}
</style>

Я ожидаю, что когда вы нажимаете на img, div плавно показывает изображение, большее между двумя строками, как макет поиска Google, и изображение, на которое нажали, получило небольшой треугольник, также когда вы нажимаете «ничего», div закрывается