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
<divclass="mx-auto"style="width: 20rem; height:25rem;"><divclass="card zoom"><imgclass="card-img-top"src="XXX"alt="XXX"style="width: 20rem; height: 12rem;"><divclass="card-body"><h4class="card-title">TEST</h4><pclass="card-text"style="line-height:1.5rem;text-align:left;height:6rem;">
TEST</br></p><ahref="XXX"class="btn btn-secondary btn-sm">Demo</a></p></div></div></div>・ぬるっと拡大する
以下コードをcssに記載し、
上記htmlのclassに指定する。
qiita.css
.zoom{-webkit-transition:all0.5sease;transition:all0.5sease;}.zoom:hover{cursor:pointer;transform:scale(1.1,1.1);box-shadow:0020pxblack;}
