画像内へのinputタグの入れ方

Question

実現したいこと

画像をクリックすると、file選択画面になる
（画像の中にfileタイプのinputを入れ、かつ、”ファイルを選択”等を非表示にしたい）

参考画像

・目標
https://gyazo.com/4122de7305e33136d359b525d74f678d
・現在
https://gyazo.com/0fe7f06c139701c50a0611a3d156047b

hamlコード

.exhibition__upload__box
      .exhibition__upload__box__head
        出品画像
        %p.exhibition__upload__box__head__sub 最大4枚までアップロードできます
      .exhibition__upload__box__images
        .exhibition__upload__box__image
          = image_tag "https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png", alt: "Item upload dummy" ,height: "100%", width: "100%"
          .file-picker
          %input{accept: "image/*", name: "image1", type: "file"}
        .exhibition__upload__box__image
          = image_tag "https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png", alt: "Item upload dummy" ,height: "100%", width: "100%"
          .file-picker
          %input{accept: "image/*", name: "image2", type: "file"}
        .exhibition__upload__box__image
          = image_tag "https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png", alt: "Item upload dummy" ,height: "100%", width: "100%"
          .file-picker
          %input{accept: "image/*", name: "image3", type: "file"}
        .exhibition__upload__box__image
          = image_tag "https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png", alt: "Item upload dummy" ,height: "100%", width: "100%"
          .file-picker
          %input{accept: "image/*", name: "image4", 

cssコード

.exhibition__upload__box{
  height: 350px;
  padding: 40px;
  border-bottom: 2px solid rgb(245,245,245);
  &__head{
    font-size: 16px;
    font-weight: 900;
    &__sub{
      font-size: 12px;;
    }
  }
  &__images{
    height: 200px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  &__image{
    width: 24%;
    border: 1px dotted gray;
    background-color: rgb(245,245,245);
  }
}

試したこと

labelタグを用いる
imageをrelativeにし、inputをabsoluteにする
display:none;を用いる

最後に

初めての質問ですので、情報量が少なければ、ご指摘いただけると幸いです

Comments

[m.ts10806]

>hamlコード
とされると環境用意しないといけません。ブラウザに出力されたHTMLをご提示ください。
あと、CSS JavaScriptもご提示ください。

[x_x]

「試したこと」が反映されたコードを書いてください。

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

Answer 1

以下のようなHTMLが出力されていれば問題ないはずですが、
試したことに書いてある内容でもダメであれば何かが邪魔をしていると思われます。

<label for="image1">
  <img src="https://asset.fril.jp/assets/new_web/item_upload_dummy-0f57862f590c6e592ffa657b6b8c6fbdd3c4051a1acc60d72e5a15f4f71f7351.png">
</label>
<input type="file" id="image1" style="display: none;">

Comments

[pqtrick]

<label>にclassを与えてしまっていて、そもそも<input>とのidによる紐付けができていませんでした。。

[pqtrick]

ありがとうございました