HTML/CSSで作るカード型レイアウトの一例を
参考までに記事にしました。
今回は、縦型のカードでカードをホバーすると
詳細のテキストとリンクボタンが表示される設定です。
実際に作成したカードデザイン
カードの周りには、box-shadow:の設定も使ってます。
今回のおこなった変更点
カードにカーソルを合わせると、カードが少しずれる設定。
.card:hover{
transform: scale(1.05);
}
scaleの数値で動く方向と距離指定。
１以上の値 浮いた感じになる
１以下の値 沈んだ感じになる。
カードが動く速度の調整も可能。
今回は、cardに
transition: transform 500ms ease;
を設定してる。
カードホバーでタイトルの下の線が左から表示される。
.card-title::after {
タイトルの下の線の始点位置の設定
transform: scaleX(0);
左端から線が出る設定
transform-origin: left;
線が始点から終点まで表示される速度
transition: transform 500ms ease;
}
.card:hover .card-title::after {
タイトル下の線の終点位置の設定
transform: scaleX(1);
}
この部分でタイトル下に線が引かれる感じで表示させてる。
ホバーしたらテキストが下から出てくる設定
card-content部分の文字が、cardコンテンツから
はみ出た部分は非表示にする設定。
.card {
overflow: hidden;
}
.card-content {
ノーマルの位置から下に80％分下げる設定。
transform: translateY(80%);
transition: transform 500ms ease;
}
.card:hover .card-content {
cardをホバーしたら、下げてるタイトルなどが
ノーマルの位置に表示される設定。
transform: translateY(0);
}
ホバーして出てきたテクスト透明非表示
.card-content > *:not(.card-title) {
opacity: 0;
transition: opacity 500ms linear;
}
.card:hover .card-content > *:not(.card-title) {
opacity: 1;
}
これを基本でいろいろカスタマイズして使っていこう。
今回書いたコードのサンプルです。
最後に今回書いたコードのサンプルも追加しました。
よかったら参考にしてください。
HTML
<body>
<div class="card">
<div class="card-content">
<div class="card-title">
外構工事</div>
<p class="card-text">外構とは建物の外にある構造物全体の事です。
フェンスやカースペースや庭など家の建物自体を除いた部分は全て外構となり、機能性を考えながら多種多様なものがあります。</p>
<a href="#" class="btn">詳しくはこちら</a>
</div><!-- /.card-content -->
</div>
</body>
CSS
@charset "utf-8";
:root {
--clr-neutral-900: hsl(207, 19%, 9%);
--clr-neutral-100: hsl(0, 0%, 100%);
--clr-neutral-400: hsl(142, 90%, 61%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
min-height: 100vh;
place-items: center;
line-height: 1.6;
/* background: var(--clr-neutral-900); */
/* ホバーしたらテキストが下から出てくる設定 */
padding-right: 15em;
}
.card {
color: var(--clr-neutral-100);
background-image: url(./img/top1.jpg);
background-size: cover;
padding: 10rem 0 0;
max-width: 35ch;
border-radius: 1rem;
overflow: hidden;
transition: transform 500ms ease;
}
.card:hover,
.card:focus-within{
transform: scale(1.05);
box-shadow: 5px 10px 20px rgba(0,0,0,0.25);
}
.card-content {
/* タイトル下の線ずらさない場合はこのままでOK
padding: 1.5em; */
/* ↓ タイトル下の線をずらすため定義つけ */
--padding: 1.5em;
padding: var(--padding);
/* ↓ これで黒い幕かぶせた感じになる↓
background: hsl(0 0% 0% / 0.6); */
background: linear-gradient(
hsl(0 0% 0% / 0),
hsl(20 0% 0% / 0.3) 20%,
hsl(0 0% 0% / 1)
);
/* ホバーしたらテキストが下から出てくる設定 */
transform: translateY(80%);
transition: transform 500ms ease;
/* ホバーしたらテキストが下から出てくる設定 */
}
.card:focus-within .card-content {
transition-duration: 0ms;
}
/* ホバーして出てきたテクスト透明非表示 */
.card-content > *:not(.card-title) {
opacity: 0;
transition: opacity 500ms linear;
}
.card:hover .card-content > *:not(.card-title),
.card:focus-within .card-content > *:not(.card-title) {
opacity: 1;
transition-delay: 1000ms; /* 動作するまでの時間 */
}
/* ホバーしたらテキストが下から出てくる設定 */
.card:hover .card-content,
.card:focus-within .card-content {
transform: translateY(0);
transition-delay: 500ms; /* 動作するまでの時間 */
}
/* ホバーしたらテキストが下から出てくる設定 */
.card-title {
position: relative;
width: max-content;
}
.card-title::after {
content: "";
position: absolute;
height: 4px;
bottom: 0;
/* タイトル下の線ずらさない場合はこのままでOK
left: 0;
width: 100%; */
/* ↓ タイトル下の線をずらす設定 */
left: calc(var(--padding) * -1);
width: calc(100% + var(--padding));
background: var(--clr-neutral-400);
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms ease;
}
.card:hover .card-title::after,
.card:focus-within .card-title::after {
transform: scaleX(1);
}
.card-text {
color: rgb(255 255 255 /0.85);
}
.btn {
cursor: ponter;
display: inline-block;
text-decoration: none;
color: var(--clr-neutral-900);
background-color: var(--clr-neutral-400);
padding: 0.5em 1.25em;
border-radius: 0.25em;
}
.btn:hover,
.btn:focus {
background-color: var(--clr-neutral-100);
}
参考にしたYouTube動画
コメント