Profile hover card

<!DOCTYPE html>

<html>
  <head>
    <script src="./lib/main.ts"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
<div *ngFor="let d of data; let i = index">
<div class="parent">
<div id="one"class="circular--landscape image1" (mouseover)="showprofile(d)" (mouseout)="hideprofile(d)">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" />
</div>
<div id="two" *ngIf="d.showpop" class="image2">
  <div class="maincard">
    <div class="mainheader">
      <p>The Header</p>
    </div>
      <div class="maincontainer">
      <p>Some random texts</p>
      <button>follow</button>
    </div>
  </div>
  </div>
</div>
</div>
  `,
})
export class App {
  name: string;
   data = [
    {
        ID: '001',
        Name: 'Angular',
        Image: 'angularjs.png',
        showpop: false
    },

    {
        ID: '002',
        Name: 'JSON',
        Image: 'json.png',
        showpop: false
    },

    {
        ID: '003',
        Name: 'Asp.Net',
        Image: 'aspnet.png',
        showpop: false
    }
];
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
  }
   showprofile(e){
    e.showpop = true;
  }
  hideprofile(e){
    e.showpop = false;
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 85px;
  height: 85px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
}

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
  z-index: 1;
}
.image2 {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 700px;
  z-index: 3;
}
.maincard {
  width: 30%;
  display: flex;
  flex-direction: column;
  border: 1px red solid;
}

.mainheader {
  height: 30%;
  background: red;
  color: white;
  text-align: center;
}

.maincontainer {
  padding: 2px 16px;
}

{
  "name": "@plnkr/starter-angular",
  "version": "1.0.3",
  "description": "Angular starter template",
  "dependencies": {
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "core-js": "2.6.11",
    "rxjs": "6.5.4",
    "zone.js": "0.10.2"
  },
  "main": "./lib/main.ts",
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}