【HTML&CSS】課題サイト④カード全体をクリックできる

2020 6/20

2020.06.17 2020.06.20

今回のテーマは、『カード全体をクリックできるようにする』コードの書き方です。PC表示でカードにカーソルを当てたとき、以下の動画のような表示になるようにします。

具体的に言うと：
カード（親）にカーソルを当てたときに次の２点が同時にできるようにしたい
①画像（card_img）を透過する
②リンクボタンの色を変える

それではカードのHTML＆CSSを見ていきます。★が今回のポイントです。

【HTML】（下の画像のイメージ）
<div class=”works_card”>
　<a class=”card_link” href=””>　←★divタグの中をaタグで囲んでしまう
　　<p><img class=”card_img” src=”画像”></p>　
　　<p class=”card_text”>説明文が入ります。説明文が入ります。説明文が入ります。</p>
　　<p class=”card_btn”>詳細を見る</p>
　</a>
</div>

【CSS】
.works_card {
　overflow: hidden;　←画像・テキストを丸みのある枠に合わせる
　flex-basis: 32%;
　margin-bottom: 60px;
　padding-bottom: 16px;
　transition: .2s;
　text-align: center;
　border: 1px solid #ccc;
　border-radius: 20px;
}
.works_card:hover {
　opacity: .8;　←ホバーしたときに画像を透過する
}
.works_card:hover .card_image {　←★カードと画像のホバーを連動させる
　box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}
.works_card:hover .card_button {　←★カードとボタンのホバーを連動させる
　color: #fff;
　background: #333;
}
.card_link {
　text-decoration: none;　←aタグの調整をする
　color: inherit;
}