BLOG

pricing card

おはようございます。

新年二日目。シンプルにただの土曜日だと思うといつもどおり作業に励めるわと思っておりますどうもハヤトワンです。

とはいえおみくじは引いときたい。

今日のコーディングはシンプルな料金表

https://github.com/HayatoMoromasa/sample/tree/main/pricingCard

ホバーすると、縦ににょ~んと伸びる感じのアニメーション。

.container .card .details {
    position: relative;
    text-align: center;
    top: -2px;
    height: 0;
    transition: 0.5s;
    border: 2px solid #000;
    margin-top: -2px;
    overflow: hidden;
}

.container .card:hover .details {
    height: 450px;
}

どシンプルですが、heightを0にしておいて、ホバーしたときにheightの高さを指定した分伸びる感じ。

top: -2px;は微調整分。

という感じでした。

それでは今日も良い一日を!