スマホで見たときに、表示された画像に数秒後自動で画像と同じ大きさのキャプション(テキスト入り)を被せたいです。

Question

前提・実現したいこと

スマホで見たときに、表示された画像に数秒後自動で画像と同じ大きさのキャプション(テキスト入り)を被せたいです。マウスオーバーで表示させることには成功しましたが、自動で表示させるようにしたいです。

ここに質問の内容を詳しく書いてください。

どのようなhtml,cssを使用すれば良いでしょうか？

該当のソースコード

<figure>
    <img src="画像URL" />
        <figcaption>
        <p class="fontL">テキスト</p>
        <p class="fontM">テキスト</p>
    </figcaption>
</figure>

該当のソースコード

figure {
    position: relative;
    overflow: hidden;
    width: 50%;
}
figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    opacity: 0;
}
 
figure:hover figcaption {
    opacity: 1;
}
p.fontL {
padding: 25% 0 0 0;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 30px;
}
 
p.fontM {
color: #fff;
text-align: center;
}
 
@media screen and (max-width: 599px){
figure {
    width: 80%;
}
}

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

下記URLサイトのように数秒後自動で表示されるようにしたいです・・・

https://www.rakuten.ne.jp/gold/liugoo/hon_mente/hon_mente.html

Answer 1

この条件で実装したいのであれば
JavaScriptが使用できないと実装不可です。

表示された画像に数秒後自動で画像と同じ大きさのキャプション(テキスト入り)を被せたい

Comments

[退会済みユーザー]

ご回答ありがとうございます。
そうなんですね・・・
この記述にどの様なJavaを追加すれば良いのでしょうか？スライドさせたりはJavaで行った事はあるのですが、素人なもので・・・

[yasutomi]

Javaという言語があるので
JavaScriptはJavaと略すのは間違いです。

現在の質問者様のスキルでは
説明してもご理解いただけないので
まずはJavaScriptの基礎を学習することを
オススメします。

[退会済みユーザー]

分かりました！

Answer 2

サンプル

figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
/* ここから削除
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    opacity: 0;
 ここまで削除 */

    animation: fadein 1s 2s both; /* 追加 */
}

/* ここから削除
figure:hover figcaption {
    opacity: 1;
}
 ここまで削除 */

/* ここから追加 */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* ここまで追加 */

参考：CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN

Comments

[退会済みユーザー]

ありがとうございます！
試してみます！

[yasutomi]

ちなみにこちらのJavaScriptを使用せずCSSだけで対応するやり方の場合
2s(2秒後)の表示となり、Webサイトの読み込みに時間がかかっている場合は
実質「最初から表示」になってしまうため
実際のWebサイトでこれだけ使用されているケースはほとんどないです。

提示していただいたURLのサイトだと
一瞬ローディングアイコン(くるくる回るやつ)が表示されますが
あれはJavaScriptで読み込み完了まで待つ制御がされています
https://www.rakuten.ne.jp/gold/liugoo/hon_mente/hon_mente.html

[退会済みユーザー]

そーなんですね・・・
凄く丁寧にありがとうございます！
今までJavaScriptについて調べてたのですが頭がパンクしそうです。
わたしにはまだ早いかな・・・