HTML/CSSで作るカード型レイアウトの一例で、カーソルホバーしたらタイトルテキストが現れる設定。【サンプルコードあり】

HTML/CSSで作るカード型レイアウトの一例を
参考までに記事にしました。

今回は、縦型のカードでカードをホバーすると
詳細のテキストとリンクボタンが表示される設定です。

実際に作成したカードデザイン

カードの周りには、box-shadow:の設定も使ってます。

<br /> See the Pen <a href="https://codepen.io/inopro/pen/eYVqxWE"><br /> Untitled</a> by 井上 (<a href="https://codepen.io/inopro">@inopro</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

今回のおこなった変更点
今回書いたコードのサンプルです。
参考にしたYouTube動画

今回のおこなった変更点

カードにカーソルを合わせると、カードが少しずれる設定。

.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>

<body>

外構工事</div>

<p class="card-text">外構とは建物の外にある構造物全体の事です。

フェンスやカースペースや庭など家の建物自体を除いた部分は全て外構となり、機能性を考えながら多種多様なものがあります。</p>

<a href="#" class="btn">詳しくはこちら</a>

</div>

</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);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

@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動画

最近思うのですが、独学もいいのですがわからない所や、
コーディング時のルールなど教えてもらえる環境も必要かなと
感じています。

そこでプログラミングスクールの記事も書いてみました。

プログラミングスクールの需要が、ここ最近は高まってる傾向にあります。近年は、プログラミングを勉強して、ネット制作の仕事をされる方が多くなり、独学で勉強されてる方や、塾などに通って勉強される方様々です。また、プログラミングスクールいろ...

高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

新品価格
￥1,243から
(2021/12/27 20:38時点)