smaller overview; big modal view

source/src/app/components/certificates/certificates.component.css

@@ -7,8 +7,7 @@
 .overlay {
     position: absolute;
     bottom: 0;
-    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.8);
-    background: rgba(0, 0, 0, 0.5);
     color: #f1f1f1;
     width: 100%;
     transition: .5s ease;
@@ -23,37 +22,43 @@
     opacity: 1;
 }
 
-.modal {
+/* The Close Button */
-    display: none;
+.close {
-    /* Hidden by default */
     position: fixed;
-    /* Stay in place */
+    z-index: 2;
-    z-index: 1;
+    top: 0;
-    /* Sit on top */
+    right: 20px;
-    padding-top: 100px;
+    color: #d3d3d3;
-    /* Location of the box */
+    font-size: 80px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.close:hover,
+.close:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#myModal {
+    position: fixed;
+    z-index: 2;
     left: 0;
     top: 0;
     width: 100%;
-    /* Full width */
     height: 100%;
-    /* Full height */
+    overflow: hidden;
-    overflow: auto;
-    /* Enable scroll if needed */
-    background-color: rgb(0, 0, 0);
-    /* Fallback color */
     background-color: rgba(0, 0, 0, 0.9);
-    /* Black w/ opacity */
 }
 
-
-/* Modal Content (image) */
-
 .modal-content {
     margin: auto;
     display: block;
-    width: 80%;
+    max-width: 90%;
     max-width: 700px;
+    max-height: 100%;
+    max-height: 1000px;
 }
 
 
@@ -71,6 +76,7 @@
     from {
         -webkit-transform: scale(0)
     }
+
     to {
         -webkit-transform: scale(1)
     }
@@ -80,27 +86,8 @@
     from {
         transform: scale(0)
     }
+
     to {
         transform: scale(1)
     }
 }
-
-
-/* The Close Button */
-
-.close {
-    position: absolute;
-    top: 15px;
-    right: 35px;
-    color: #f1f1f1;
-    font-size: 40px;
-    font-weight: bold;
-    transition: 0.3s;
-}
-
-.close:hover,
-.close:focus {
-    color: #bbb;
-    text-decoration: none;
-    cursor: pointer;
-}

source/src/app/components/certificates/certificates.component.html

@@ -1,7 +1,7 @@
-<mat-card class="content-container bg-info text-white" style="border-radius:20px;">
+<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
     <mat-card-title>
-        <h1 class="my-3 text-center">
+        <h1 class="my-3 display-1 text-center">
-            <span style="color:#ffffff">C</span><span style="color:#020077">ertifications</span>
+            <span style="color:#ffffff">C</span><span style="color:#bebdff">ertifications</span>
         </h1>
     </mat-card-title>
 
@@ -10,17 +10,17 @@
     </mat-card-subtitle>
 
     <mat-card-content>
-        <mat-grid-list cols="4" rowHeight="1:1">
+        <mat-grid-list cols="5" rowHeight="1:1">
-            <mat-grid-tile class="cert-container {{certificate.category}}" *ngFor="let certificate of certificates">
+            <mat-grid-tile class="cert-container {{certificate.category}}" *ngFor="let certificate of certificates" (click)="showModal(certificate.category+'/'+ certificate.title +'.jpg')">
                 <img src="../../../assets/Zertifikate/{{certificate.category}}/{{certificate.title}}.jpg" class="cert-img">
                 <p class="overlay">{{certificate.title}}</p>
             </mat-grid-tile>
         </mat-grid-list>
-
-        <div id="myModal" class="modal">
-            <span class="close">&times;</span>
-            <img class="modal-content" id="modalImage1">
-        </div>
     </mat-card-content>
 
 </mat-card>
+
+<div id="myModal" *ngIf='show'>
+    <span class="close" (click)="hideModal()">&times;</span>
+    <img class="modal-content" src='../../../assets/Zertifikate/{{show}}'>
+</div>

source/src/app/components/certificates/certificates.component.ts

@@ -10,10 +10,20 @@ import { CERTIFICATES } from "./certificates";
 export class CertificatesComponent implements OnInit {
 
   certificates: any = CERTIFICATES;
+  show: any = false;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  showModal(chosen: String){
+    console.log("show "+ chosen )
+    this.show = chosen
+  }
+
+  hideModal(){
+    this.show = false;
+  }
+
 }