等の画像付き掲示板で、画像(サムネイル)をクリックすると、同じ位置に拡大写真が表示され、回りこんでいたテキスト文が画像の下に表示されるのを見かけるが、これを、CSSで作成した。本稿は、前稿の画像拡大縮小部分をアニメーション化したものである。小サイズ画面に対応させるため、レスポンシブに留意した。画像の表示サイズは、各画像について別々に設定することが可能である。サンプル朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。6時5分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。これだけ近くからの迫力ある剣・立山はここからしか見られない。尾根と谷(雪渓)が交互に織りなす荒々しさが迫力を持って迫って見える。ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。幸運なことにブロッケンまで現れ、我々を祝福してくれた。岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう360度の大パノラマ。朝、雲海に浮かぶ浅間山を赤く染めて日の出を迎える。彼方に富士山、八ヶ岳が雲海に浮かんで見え、針ノ木岳が赤く染まる。新越山荘は今日の好天気を期待させる朝を迎えた。6時5分、新越山荘を出発。尾根の東側のゆるやかな登りを登りつめ稜線に出た所で、見えた、やりました、雲海の向こうに立山連峰と剱岳がその秀麗な姿を見せている。新越山荘に宿泊したことが大正解の大成功。ここからの稜線歩きは、登りにもかかわらず、早く周りの山々を見渡したいという気持ちから、思わず足早になるが、一方では、何度も何度も剣・立山を始めだんだん見えてくる周りの山々を眺めては、感激に浸るのであった。幸運なことにブロッケンまで現れ、我々を祝福してくれた。岩小屋沢岳の手前のそれに匹敵するようなピークに登りつめると、もう360度の大パノラマ。・各articleにdiv、#box1,#txt1(1番目の場合)を配置し、#box1には画像、#txt1にはテキスト文を入れる。・画像は拡大サイズのものを配置し、初期は、サムネイルサイズとする。・各画像(ここでは2枚)にラジオボタンを関連付けする。・画面全体の大きさの背景div、#backを配置し、ラジオボタンに関連付ける。(拡大表示時に画面のどこをクリックしても元に戻るようにするため)・拡大時に画像クリックで元に戻るようにするため、画像と同じ位置、同じ大きさになるようなdiv、#cover1を配置しておく。height:100%;}は、#backが画面全体をカバーするようにする。設定することにより、画面サイズに対応してリサイズするようにする。よるアニメーションが発生する。記述をしなければ、改行はされず、拡大画像の右側にテキストが回り込むようになるので、拡大画像の大きさによっては、こちらの方がよい場合がある。・画像が拡大された状態で、画像を含む、画面のどこがクリックされても、transitionがとかれ元の状態に戻る。お尋ねしたいことがあるのですが、「本サンプル表示用HTML」のlabel、#r0はどのような働きをしているのでしょうか?「本サンプル表示用HTML」のlabel、#r0を取り除くと#r1又は#r2のラジオボタンにチェックが入っていたとしても、対象が拡大表示されないので疑問に思い質問をさせていただきました。:sheepさんはじめまして。#r0は、#r1,#r2に相当するサムネイルとテキスト文全体を含むdivです。それには、何のtransitionも付与していません。したがって、どちらかの画像が拡大している時点で、画面のどこをクリックしても、transitionが解かれ、元の画面に戻ることになります。:返信ありがとうございます。#r0は元の画面に戻す役割を担っているんですね。それなら#r0のlabelタグのみを削除#したとして、#r1や#r2が拡大表示を元に戻せなくても拡大表示のみなら可能なのでは、と思っているのですが実際は拡大表示されません。#r0のlabelを削除した場合でも#r1や#r2にチェックさえ付けばcheckedの処理に入ると考えているのですがどうも考えが間違っているようなのです。基本的なことを伺っていて申し訳ないですが、お教え頂ければ幸いです。:を、削除してみてください。ところのパスが通らなくなり、拡大は起きません。ここでもlabelを消してください。:labelを消したところ拡大するのを確認できました。#box1に変えて試していました。以下のところは、全部のパスを順序良く通す必要があります。疑問が生じたら、考えましょう。コメントをキャンセルメールアドレスが公開されることはありません。フォトギャラリー・スライドショ。