オブジェクトをクリックしたらズームしてテキスト解説付きのオブジェクトにしたい

前提・実現したいこと

画像が三列、三行ならんでいます。

ただのjpg画像です。

で、その、画像をクリックしたら画像の中心から大きくズームして、尚且つ、右側に説明のテキストを
加えたオブジェクトにしたいのです。

JSで可能でしょうか？

該当のソースコード

html
1<div class="main container">
2        <div class="col">
3          <a href="#">
4            <img class="bd" src="./images/pro7.jpg">
5          </a>
6        </div>
7
8        <div class="col">
9          <a href="#">
10            <img class="bd" src="./images/pro10.jpg">
11          </a>
12        </div>
13
14        <div class="col">
15          <a href="#">
16            <img class="bd" src="./images/pro11.jpg">
17          </a>
18        </div>
19
20        <div class="col">
21          <a href="#">
22            <img class="bd" src="./images/pro12.jpg">
23          </a>
24        </div>
25
26        <div class="col">
27          <a href="#">
28            <img class="bd" src="./images/pro3.jpg">
29          </a>
30        </div>
31
32        <div class="col">
33          <a href="#">
34            <img class="bd" src="./images/pro16.jpg">
35          </a>
36        </div>
37      </div>
38

css
1
2.container {
3  overflow: hidden;
4  width: 100%;
5  max-width: 1500px;
6  margin: 0 auto;
7  padding: 2rem 1rem;
8  margin-top: 50px;
9  position: relative;
10}
11
12.col {
13  padding: 2rem;
14}
15@media (min-width: 800px) {
16  .col {
17    width: 33%;
18    float: left;
19    
20  }
21  .col:nth-of-type(3n+1) {
22    clear: left;
23  }
24}
25.col.col--full {
26  width: 100%;
27}
28
29.bd {
30  border: 1px solid #000000;
31}
32