bootstrap4 card 行間・高さ・位置調整し、ぬるっと拡大する

4132 ワード
HTML5 bootstrap4 CSS CSS テキストリンク

bootstrap4 card 行間・位置調整し、ぬるっと拡大する

※個人作業レベルのメモです
※公式ドキュメントは以下
　https://cccabinet.jpn.org/bootstrap4/components/card

・完成状態

・拡大後

・要素の真ん中に表示する
　divタグのclassに「mx-auto」を指定する

・行間調整する
　pタグに「style="line-height:XXrem"」を指定する

・高さ調整する
　pタグに「style="height:Xrem;"」を指定する
　img、タグのclassに「height:XXrem;」を指定する
　※各要素で高さが決まっている為、各要素のstyleに指定すれば調整可能

qiita.html
  <div class="mx-auto" style="width: 20rem; height:25rem;">
    <div class="card zoom">
      <img class="card-img-top" src="XXX" alt="XXX" style="width: 20rem; height: 12rem;">
      <div class="card-body">
        <h4 class="card-title">TEST</h4>
        <p class="card-text" style="line-height:1.5rem;text-align:left;height:6rem;">
          TEST</br>
        </p>
        <a href="XXX"class="btn btn-secondary btn-sm">Demo</a></p>
      </div>  
    </div>
  </div>

・ぬるっと拡大する
以下コードをcssに記載し、
上記htmlのclassに指定する。

qiita.css

    .zoom {
      -webkit-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .zoom:hover {
      cursor: pointer;
      transform: scale(1.1, 1.1);
      box-shadow: 0 0 20px black;
    }