【HTML、CSS】マウスホバーのサイズとレイアウトのサイズのバランスが変です。

Question

画像にマウスを乗せるとき、
画像の下端からInstagram（緑色のバー）を表示されるように作成しました。

そこで分からないことは３点あります。
①左に画像・右に文字列を配置するレイアウトを作ったのですが、
HPのサイズによってマウスホバーのサイズが変わるので困ってます。
マウスホバーを画像のサイズにピッタリ（固定）にしたいのですが、どこに修正するべきでしょうか？
※スマホみるときは問題なさそうです。

②左に画像が右に文字列から離れてますが、
それぞれバランスよく（中央寄せ）表示させるためにはどこに修正するべきでしょうか？

③スマホで見るときだけ、テキストを中央に配置するにはどうしたら良いでしょうか？

宜しくお願い致します。

■画像サイズ
ピクセル:水平方向500/垂直方向600

■HPサイズ
画像にマウスを乗せる前

画像にマウスを乗せた時

■スマホ
（スマホで見るときテキストを中央に配置したいです）

    <section id="Animal" class="Animal">
      <div class="container">

        <div class="section-title" data-aos="fade-up">
          <h2>Animal</h2>
        </div>

        <div class="row">
          <div class="col-lg-6" data-aos="fade-right">

            <div class="member" data-aos="zoom-in">
              <div class="member-img">
                <img src="assets/img/Animal/Animal.jpg" class="img-fluid" alt="">
                  
                <div class="social">
                  <a href=""><i class="bi bi-instagram"></i></a>
                </div>
              </div>
            </div>

          </div>
          <div class="col-lg-6" data-aos="fade-left">
            <div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
              <h3>Animal</h3>
              <p class="font-italic">体長4〜5m 体重0,6〜1,9t 地球上で最も背の高い動物です。 <br>キリンはマメ科の木の葉や芽など比較的やわらかい物を食べますが、餌が少ない季節は、木の枝や皮、草なども食べます。</p>
            </div>
          </div>
        </div>

      </div>
    </section>

/*Animal Us*/
.Animal .section-title h2 {
  font-size: 70px;
  font-weight: 700;
}


.Animal .content h3 {
  font-size: 30px;
  font-weight: 600;
}

.Animal .content h4 {
  font-size: 22px;
  font-weight: 600;
}

.Animal .content p:last-child {
  margin-bottom: 0;
}

/*Animal image*/
.Animal .image {

  background: #fff;
  padding: 60px 0;
}

.Anima .member {
  margin-bottom: 20px;
  overflow: hidden;
}

.Animal .member .member-img {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}

.Animal .member .social {
  position: absolute;
  left: 0;
  bottom: -40px;
  right: 0;
  height: 60px;
  opacity: 0;
  transition: bottom ease-in-out 0.4s;
  background: rgba(124, 197, 118, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Animal .member:hover .social {
  bottom: 0;
  opacity: 1;
  transition: bottom ease-in-out 0.3s;
}

.Animal .member .social a {
  transition: color 0.3s;
  color: rgba(255, 255, 255, 0.7);
  margin:  10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.Animal .member .social a i {
  line-height: 0;
}

.Animal .member .social a:hover {
  color: #fff;
}

.Animal .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

Comments

[Lhankor_Mhy]

もしかして、Bootstrapを使っていませんか？

[kumalike]

Bootstrapを参考して作成しました。

Answer 1

こんばんは。

これを追加するとどうでしょうか？

.Animal .member .member-img {
	width: max-content;
}

Comments

[kumalike]

Lhankor_Mhy様
コメントありがとうございます。
上記を追加すると、PCサイトではマウスホバーのバランスが取れていますが、スマホに対応する際、画像が画面からはみ出てしまってます。

[kumalike]

度々すみません。「max-width: 100%;」を追加するとスマホ対応でもバランス取れました。

[Lhankor_Mhy]

ご解決されて何よりです。

[kumalike]

ありがとうございました！
Bootstrapを使っていることどうしてわかったのでしょうか？

[Lhankor_Mhy]

クラス名が特徴的でしたので。

レイアウトに影響がありますから、次にご質問される機会がありましたら、あらかじめBootstrapを使用している旨を質問に書いておいた方が、回答が得られやすくなると思います。

[kumalike]

承知致しました。アドバイスありがとうございます！