質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

898閲覧

拡大されるマウスオーバーをfigureの画像の高さを保ったまま実装したい

renmo

総合スコア17

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/01 01:01

前提・実現したいこと

画像のようなことを実現したいです。
イメージ説明

ソースコードの変更が必要なのか、どのように変更すればいいのか
●理想のためには高さ?をどのように設定したらよいかわかりませんでした。
ご教示いただければ幸いです。
よろしくお願いいたします。

html

1 <div class="item item01 item-ln"> 2 <a href="#"> 3 <figure> 4 <img src="../../assets/run.jpg" alt=""> 5 <figcaption><span style="text-align: center">走る</span></figcaption> 6 </figure> 7 </a> 8 </div>

css

1figure{ 2 margin: 0; 3 padding: 0; 4 overflow: hidden; 5 width: 100%; 6 background: #241E21; 7} 8 9figure img{ 10 display: block; 11 transition-duration: 0.3s; 12} 13figure img:hover{ 14 transform: scale(1.5); 15 transition-duration: 0.3s; 16 opacity: 0.6; 17} 18 19figcaption{ 20 line-height: 1.5em; 21 margin0: 0; 22 padding: 0; 23} 24 25.item{ 26 padding: 0 10px; 27 transition-duration: 0.3s; 28} 29 30.item:hover{ 31 opacity: 0.6; 32 transition-duration: 0.3s; 33} 34 35.item a{ 36 color: #fff; 37} 38 39.item-ln{ 40 padding-left: 0; 41} 42 43 44.item01{ 45 border-bottom: solid 5px #0062B6; 46 margin-bottom: 5px; 47} 48

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

適当にラップしてoverflowを設定してみては?

CSS

1<style> 2.wrap{ 3overflow:hidden; 4} 5</style> 6<figure> 7<div class="wrap"> 8<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=hoge" alt="hoge"> 9</div> 10<figcaption><span style="text-align: center">走る</span></figcaption> 11</figure>

投稿2021/10/01 02:34

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

renmo

2021/10/01 04:14

ご教示いただきありがとうございました! 柔軟性に欠けておりました。 無事解決いたしました。本当にありがとうございます
renmo

2021/10/01 04:16

ご教示いただきありがとうございました。 柔軟性に欠けておりました。 無事解決いたしました。本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問