ついコンテンツ（画像）をテキストやボタン付きで、ライトボックスを使用した時のように表示したい。

コンテンツをクリックした際、このような形で表示をさせたいのですが、
自分で色々検討しましたが、なかなか難しく、質問させていただきました。
（自身では、lightbox等を導入して、画像の表示に近づけようと試行錯誤しましたが（画像横・２カラム・テキストボタン表示）、
自分の力量では不可能と判断したため、お力を借りに質問させていただきました。）
希望のようなレイアウトにするには、どのような方法があるでしょうか。
contentsはimg（画像）です。
ご回答願えると、大変助かります。

【追記】このサイトのような表示形式を目指しています。
https://meetsmore.com/services/handyman/
（自身でもコードを読み努力していますので、解決したことがありましたら追記させていただきます。）

【追記】
今現在はこのような状態です。
lightboxは一度導入しましたが、希望のようにならなかったため一度削除しました。
freewallの導入は、今回の件には関係ありません。

情報が少ないかもしれないのですが、よろしくお願いします。

HTML/CSS
1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6      <script src="../js/jquery-3.5.1.min.js"></script>
7      <script src="freewall.js"></script>
8      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
9
10      <style>
11      body{
12          margin: 0;
13          padding: 0;
14      }
15      .container{
16          display: flex;
17          background: #e4f1fe;
18      }
19      .left{
20          width: 300px;
21          background: #020205;
22          color: #fff;
23          position: fixed;
24          height: 100%;
25          text-align: center;
26          padding-top: 30px;
27      }
28
29      input[type="text"]{
30        border: solid 1px #aaa;
31        border-radius:5px;
32        padding:10px;
33        font-size: 15px;
34      	margin: 3px 0 30px;
35      }
36
37      button[type="submit"]{
38        border: solid 1px #aaa;
39        border-radius:5px;
40        padding:10px;
41        font-size: 15px;
42        margin: 3px 0 40px;
43      }
44
45      nav {
46       background-color: #020205;
47      }
48
49      nav p{
50        width: 300px;
51        line-height: 60px;
52       display: block;
53       color: #fff;
54       font-size: 1em;
55       text-align: center;
56       margin: 0;
57      }
58
59      nav p:hover{
60       background-color: #38b6ff;
61      }
62
63      footer{
64        font-size: 0.5em;
65        text-align: center;
66        margin-top: 30px;
67      }
68
69      .contents{
70          flex: 1;
71          background: #e4f1fe;
72          margin-left: 300px;
73          padding: 10%;
74      }
75      </style>
76
77</head>
78<body>
79<div class="container">
80    <div class="left">
81      <!-- ロゴ -->
82      <p><img src="logo.png"> </p>
83      <!-- タイトル -->
84      <p><img src="title.png"> </p>
85      <!-- 検索フォーム -->
86      <form id="form2" action="自分のサイトURL" method="get">
87<input id="sbox2"  id="s" name="s" type="text" placeholder="フリーワードを入力"/>
88<button type="submit" id="sbtn2" onclick="location.href='wait.html'"><i class="fas fa-search"></i></button>
89</form>
90<nav>
91   <p>menu</p>
92   <p>menu</p>
93   <p>menuド</p>
94   <p>menu</p>
95 </nav>
96 <footer>footer text</footer>
97    </div>
98
99    <div class="contents">
100
101      <div class="layout">
102			<div id="freewall" class="free-wall"></div>
103        <div id="container">
104      <div class="item"><img src="gazou.jpg"></div>
105      <div class="item"><img src="gazou.jpg"></div>
106      <div class="item"><img src="gazou.jpg"></div>
107      <div class="item"><img src="gazou.jpg"></div>
108      <div class="item"><img src="gazou.jpg"></div>
109  </div>
110    </div>
111</div>
112
113<!-- 移動アニメーション -->
114<script>
115$('head').append(
116'<style>body{display:none;}'
117);
118$(window).on("load", function() {
119$('body').delay(1200).fadeIn("slow");
120});
121</script>
122</body>
123</html>

m.ts10806

2020/10/13 09:48

PHPはどのように関係するのでしょうか。「初心者的な質問で」とありますが、ご自身がやってみたこと調べたこと考え方ことがほとんど書いてないので、若干丸投げ＋問題・課題が明確ではないです。質問本文修正してください。

m.ts10806

2020/10/13 09:49

あと >rightbox 「lightbox」ですね。 https://lokeshdhakar.com/projects/lightbox2/

t01bi01

2020/10/13 10:05

ご指摘ありがとうございます。了解しました。

t01bi01

2020/10/13 10:08

phpを利用したサイトを作っていましたので、タグに入れさせていただきましたが、今回の質問事項に限りは、関係がない（コンテンツの表示方法のみがわからず、そこだけ助けて欲しいので）ので、タグは削除させていただきました。

m.ts10806

2020/10/13 20:54 編集

現在できているところまでで良いので、コードをご提示ください。「そこだけ」と言われても、今どこまで出来ているか分からないと（こちらの手元で試せないと）的確なアドバイスにはなりません。考え方だけで良いのでしょうか（それでも現状だとすごくふんわりした回答になります）

t01bi01

2020/10/14 00:00

了解しました。

mari.rinn

2020/10/14 04:53

この画像のようなやり方を「モーダルウィンドウ」というのですけど、現在お書きになってるコードではまだまだhtmlも足りないですし、jQueryも全然で、今この状態でここで質問して回答を頂くには早いと言いますか、とりあえずモーダルウィンドウのしくみをご理解されて、htmlだけでも必要分書けてて、その上で〜だと思いますので、一度、「jquery　モーダルウィンドウ」あたりのワードで検索してしくみを勉強された方が良いかと思います。

t01bi01

2020/10/14 09:02

ありがとうございます。自分でも勉強してみます。

行動規範の内容に同意します

回答1件

こんにちは。

dialog要素を使ってみてはどうでしょうか。

サンプル

html
1<img data-for="modal1" class="contents" src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents">
2
3<dialog id="modal1" class="modal">
4    <button class="close">x</button>
5    <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=contents" alt="">
6    modal1
7    <button data-for="submodal1" class="submodalOpen">open</button>
8</dialog>
9
10<dialog id="submodal1" class="modal submodal">
11    <button class="close">x</button>
12    submodal1
13</dialog>

js
1document.querySelectorAll('dialog').forEach( e => e.querySelector('.close').addEventListener(
2    'click',
3    () => e.close()
4));
5
6document.querySelectorAll('.contents, .modal button.submodalOpen').forEach( c => c.addEventListener(
7    'click', 
8    e => document.getElementById( e.target.dataset['for'] ).showModal()
9));