ポップアップウィンドウでボタンを画像にしたい

Question

### 前提・実現したいこと

ポップアップウィンドウを制作しようとしているのですが、図形ではなimg画像をクリックして開くように設定しなおしたいです。

発生している問題・エラーメッセージ

現在図形をクリックするようになっているコードの、何処にイメージ画像をクリックする司令を書けば良いのか分からない。

該当のソースコード

HTML

<div class="popup_wrap"> <input id="trigger" type="checkbox"> <div class="popup_overlay"> <label for="trigger" class="popup_trigger"></label> <div class="popup_content"＞;< close_btn ">×</label>

		<p>内容量：60ml (10ml×6粒)<br></p>
<hr class="line" />

<p>保存方法：要冷凍（-18℃以下）<br></p> <hr class="line" /> <p>エネルギー： 31kcal（1粒当たり）<br> 栄養成分（1粒当たり）: <br> エネルギー 31kcal:たんぱく質 0.4g:脂質 2.0g:炭水化物 2.9g:食塩相当量 0.01g<br> <hr class="line" /></p> <p>原材料 ： バニラ、 乳製品、チョコレートコーチング、砂糖、水あめ／ 乳化剤、安定剤(増粘多糖類)、香料、(一部に乳成分・大豆を含む)<br> アレルゲン : 乳成分、大豆<br></p> <hr class="line" /> <p>希望小売価格 : 140円(税別)</p>

    </div>
</div>

</div>

<label for="trigger" class="open_btn"><font size="2">内容量詳細</font></label></div>

CSS

/ポップアップ2つ/
.popup_wrap input {
display: none;
}

.popup_overlay {
display: flex;
justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}

.popup_trigger {
position: absolute;
width: 100%;
height: 100%;
}

.popup_content {
position: relative;
align-self: center;
width: 90%;
max-width: 800px;
padding: 30px 30px 15px;
box-sizing: border-box;
background: #fff;
line-height: 1.4em;
transition: 0.5s;
}

.close_btn { /.閉じる作業./
position: absolute;
top: 14px;
right: 16px;
font-size: 30px;
cursor: pointer;
}

.close_btn

.popup_wrap input:checked ~ .popup_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}

.open_btn { /.開ける作業./
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 30px;
margin:10px auto;
padding: 8px 16px;
color: #fff;
background:#C69FA0;
font-weight: bold;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
border-radius: 3px;
cursor: pointer;
transition: .3s ease;

}
.open_btn:hover{
background:#000;
color:#fff;
transition: .3s ease;

試したこと

close_btn
open _btn部分に画像のコードを書いたが普通にダメでした。

補足情報（FW/ツールのバージョンなど）

Dreamweaver 最新バージョン
HTML CSSのみ。JavaScriptは使っていません。

Comments

[m.ts10806]

質問は編集できますので新たに質問をたてる必要はありません。
またコードはマークダウンのcode機能を利用してご提示ください

Answer 1

<label for="trigger" class="open_btn"><font size="2">内容量詳細</font></label></div>

の内容量詳細にimgを入れればよいのでは？
というよりそれで確認はできました。