右上に折り目があるカードデザイン
右上に折り目があるカードです。NEW/HOT/CHECKなどのラベル付きで、ホバー時に折り目が開くアニメーションとなります
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style"></style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f2f5;
font-family: 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 20px;
}
.card-list {
display: flex;
gap: 30px;
justify-content: center;
padding: 20px;
}
/*
* 折り目カードのスタイル
*/
.fold-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
/* コンテンツ位置を上揃えに変更 */
align-items: center;
width:240px;
height: 320px;
padding: 50px 20px 30px;
/* 上パディングを多めに設定 */
box-sizing: border-box;
background: #ffffff;
color: #333;
text-decoration: none;
/* 黒いボーダー */
border: 3px solid #333;
/* 折り目の設定 */
--fold-size: 60px;
--fold-color: #333;
/*
* 右上が欠けた形状
* 親要素自体を切り抜くことで、borderも一緒に切り抜かれる
* ::before, ::after もこの領域内でしか表示されない
*/
clip-path: polygon(0 0,
calc(100% - var(--fold-size)) 0,
100% var(--fold-size),
100% 100%,
0 100%);
transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.3s ease,
box-shadow 0.3s ease;
/* 影（drop-shadow推奨） */
filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.08));
}
/*
* 折り返しの三角部分 (::before)
* 右上隅に配置し、親のclip-pathによって「左下の三角部分」だけが残るようにする
*/
.fold-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: var(--fold-size);
height: var(--fold-size);
background: var(--fold-color);
background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
/* めくれ感のある影 */
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
z-index: 10;
}
/*
* ラベルテキスト (::after)
* 折り目の中に表示する
* クリップされた領域の内側（左下の三角形部分）に配置する必要があるため
* 位置調整を慎重に行う
*/
.fold-card::after {
content: attr(data-label);
position: absolute;
/*
* 折り目の正方形サイズ60pxに対して、
* 左下半分が残る領域。
* 斜辺の中央付近に来るように調整。
*/
top: 8px;
right: 8px;
width: 60px;
/* var(--fold-size)と同値 */
height: 60px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
/* 45度回転させて斜辺に沿わせる */
transform: rotate(45deg);
z-index: 11;
pointer-events: none;
/* 折り目(::before)のアニメーション設定に合わせる */
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
top 0.4s cubic-bezier(0.25, 1, 0.5, 1),
right 0.4s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- ホバー時のアニメーション --- */
.fold-card:hover {
/* 全体が少し浮き上がる */
transform: translateY(-5px);
filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.15));
/* 右上の欠けをなくす（四角に戻す） */
clip-path: polygon(0 0,
100% 0,
100% 0,
100% 100%,
0 100%);
}
/* 折り目を消す（サイズ0へ） */
.fold-card:hover::before {
width: 0;
height: 0;
}
/* ラベルを消す（右上に縮小しながら移動） */
.fold-card:hover::after {
opacity: 0;
top: 0;
right: 0;
transform: scale(0) rotate(45deg);
}
/* コンテンツのスタイル */
.card-icon {
/* アイコンエリアの高さを固定して位置ズレ防止 */
flex-shrink: 0;
/* 縮小させない */
width: 80px;
/* サイズアップ: 64px -> 80px */
height: 80px;
margin-bottom: 25px;
/* マージンも少し広げてゆとりを持たせる */
color: #333;
/* アイコンは白黒（黒） */
transition: transform 0.4s ease;
}
.fold-card:hover .card-icon {
transform: scale(1.1);
}
/* タイトルは色替えする */
.card-title {
font-size: 20px;
font-weight: bold;
margin: 0 0 10px 0;
color: var(--fold-color);
/* タイトル色を折り目色に合わせる */
}
.card-desc {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}
/* --- カラーバリエーション --- */
/*
* 添付画像のようなCMYK風の明るいモダンカラーに変更
* テキストが白抜きでも読める程度の濃さを維持しつつ、彩度を高める
*/
/* 1. NEW: マゼンタ/ピンク系 */
.card-new {
--fold-color: #E94576;
}
/* 2. PICK UP: シアン/スカイブルー系 */
.card-pickup {
--fold-color: #49B4F1;
}
/* 3. CHECK: イエロー/ゴールド系 (白文字が読めるように少しオレンジ寄り) */
.card-check {
--fold-color: #FCDA33;
}
/*
* 下部のアクセントライン
* 添付画像のボタンのような存在感を出すため、底辺に太いボーダー風の装飾を追加
* ::after と競合しないよう、box-shadowのinsetを利用するか、border-bottomで対応
*/
.fold-card {
/*
* 下部のアクセントラインを削除し、
* シンプルな黒枠統一に戻して全体のバランスを整える
*/
border: 3px solid #333;
}
</style><style id="pic-style">html { max-height: 100%; }</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0; padding: 0;" data-vsc-ignore="true" class="vsc-ignore"><div class="card-list">
<!-- Card 1: NEW -->
<a href="#" class="fold-card card-new" data-label="NEW">
<!-- アイコン: 星 -->
<svg class="card-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
</svg>
<h3 class="card-title">New Feature</h3>
<p class="card-desc">最新の機能をご紹介します。アップデートされたUIと高速化されたパフォーマンスを体験してください。</p>
</a>
<!-- Card 2: PICK UP -->
<a href="#" class="fold-card card-pickup" data-label="HOT">
<!-- アイコン: 電球 -->
<svg class="card-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"></path>
</svg>
<h3 class="card-title">Recommendation</h3>
<p class="card-desc">編集部が厳選したおすすめ記事です。今週のトレンドと注目のトピックを深掘りします。</p>
</a>
<!-- Card 3: CHECK -->
<a href="#" class="fold-card card-check" data-label="CHECK">
<!-- アイコン: チェック -->
<svg class="card-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
<h3 class="card-title">Don't Miss It</h3>
<p class="card-desc">見逃せない重要なお知らせです。キャンペーン情報や期間限定のオファーをご確認ください。</p>
</a>
</div>
<script id="js-section"></script></body></html>
ホバー時にホバーした部分だけ画像が拡大するCSSカードデザイン
ホバー用の「div」要素を作り、JSで位置や画像を取得して拡大しています。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
height: 300px;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.card-image {
width: 100%;
height:100vh;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
#hover-effect {
position: absolute;
width: 50px;
height: 50px;
transform: scale(2);
pointer-events: none;
display: none;
border-radius: 50%;
}
</style><style id="pic-style"></style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px; width: 900px; height: 368px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a3d626b.jpg">
</a>
<a href="#" class="card">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a4494de.jpg">
</a>
<a href="#" class="card">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a4b23fc.jpg">
</a>
</div>
<div id="hover-effect" style="background-size: 260px 300px; left: 708px; top: 20px; background-image: url("https://pa-tu.work/storage/img/posts/651c84a4b23fc.jpg"); background-position: -100.802px -2.11111px; display: none;"></div>
</div>
<script id="js-section">document.addEventListener("DOMContentLoaded", function() {
const hoverEffect = document.getElementById("hover-effect");
const cardImages = document.querySelectorAll(".card-image");
cardImages.forEach((cardImage) => {
const cardImageBox = cardImage.parentElement;
cardImage.addEventListener("mousemove", function(e) {
const x = e.clientX - cardImageBox.getBoundingClientRect().left - hoverEffect.offsetWidth / 2;
const y = e.clientY - cardImageBox.getBoundingClientRect().top - hoverEffect.offsetHeight / 2;
// 画像サイズに合わせてbackgroundSizeを変更
const imgWidth = cardImage.offsetWidth;
const imgHeight = cardImage.offsetHeight;
hoverEffect.style.backgroundSize = `${imgWidth}px ${imgHeight}px`;
// ホバーエフェクトの位置と画像を変更
hoverEffect.style.left = (cardImageBox.getBoundingClientRect().left + x) + "px";
hoverEffect.style.top = (cardImageBox.getBoundingClientRect().top + y) + "px";
hoverEffect.style.backgroundImage = `url(${cardImage.getAttribute('src')})`;
hoverEffect.style.backgroundPosition = `-${x}px -${y}px`;
hoverEffect.style.display = "block";
});
cardImage.addEventListener("mouseleave", function() {
hoverEffect.style.display = "none";
});
});
});
</script></body></html>
ホバー時に画像が拡大するCSSカードデザイン
画像をdivでラップして「overflow: hidden;」を指定。ホバー時に画像を「transform: scale(1.2);」で拡大させてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.card-image-box {
overflow: hidden;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card:hover img {
transform: scale(1.2);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
ホバー時に画像が明るくなるCSSカードデザイン
画像を「filter: brightness(60%)」ですこそ暗くして。ホバー時にfilterを解除してます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
filter: brightness(0.6);
transition: filter 0.3s ease-in-out;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card:hover img {
filter: brightness(1);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
ホバー時にグレースケールが解除されるCSSカードデザイン
ホバー時に画像を「filter:grayscale」を変化させてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.card-image-box {
overflow: hidden;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
filter: grayscale(0.7);
transition: filter 0.3s ease-in-out;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card:hover img {
filter: grayscale(0);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
ホバー時にセピアが解除されるCSSカードデザイン
ホバー時に画像を「filter:sepia」を変化させてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.card-image-box {
overflow: hidden;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
filter: sepia(.7);
transition: filter 0.3s ease-in-out;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card:hover img {
filter: sepia(0);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
ホバー時にカードが少し拡大するCSSカードデザイン
ホバー時に画像を「transform: scale(1.05);」で少し拡大させてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
color: #333;
text-decoration: none;
overflow: hidden;
transition: transform 0.3s ease-in-out;
}
.card-image-box {
overflow: hidden;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px;height: 368px;transform-origin: left top;transform: scale(1);overflow: hidden;margin: 0px;padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
リンクボタンホバー時にする親要素のカードに影を入れるデザイン
「pointer-events」を使用し親要素に影を入れてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #131D26;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
transition: .5s;
width: 30%;
pointer-events: none;
}
.card:hover {
box-shadow: 0px 3px 8px #333;
}
.card-image {
margin: 2rem;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.card-link {
display: inline-block;
margin-top: 3rem;
padding: 1rem;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
pointer-events: auto;
}
.card-box {
width: 100%;
padding: 1rem;
box-sizing: border-box;
background-color: #62C69A;
color: white;
text-align: center;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="height: 368px; transform-origin: left top; transform: scale(1); overflow:hidden; margin: 0px; padding: 0px; width: 900px;" class="vsc-initialized"><div class="container">
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
</div>
</body></html>
4つ角の括弧がホバー時に現れるCSSカードデザイン
ホバー時に「background-size」を変更して伸ばしてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">:root {
--x-gradient: linear-gradient(90deg, #353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
--y-gradient: linear-gradient(#353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 0.25rem;
background-image:
var(--x-gradient),
var(--y-gradient),
var(--x-gradient),
var(--y-gradient);
background-repeat: no-repeat;
background-size: 100% 0%, 0% 100%, 100% 0%, 0% 100%;
background-position: top, right, bottom, left;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: cover;
height: 150px;
}
.card-box {
padding: 1rem 0;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<a href="#" class="card">
<img class="card-image" src="/storage/img/posts/64faf303a4eba.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/6516933d6349d.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/6516933d6926c.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
<script id="js-section">
</script></body></html>
4つ角の括弧をホバー時に伸ばすCSSカードデザイン
ホバー時に「background-size」を変更して伸ばしてます
<html style="max-height: 100%;"><head><script id="js-section">
</script><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">:root {
--x-gradient: linear-gradient(90deg, #353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
--y-gradient: linear-gradient(#353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 0.25rem;
background-image:
var(--x-gradient),
var(--y-gradient),
var(--x-gradient),
var(--y-gradient);
background-repeat: no-repeat;
background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
background-position: top, right, bottom, left;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: contain;
}
.card-box {
padding: 1rem 0;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
background-size: 100% 40px, 40px 100%, 100% 40px, 40px 100%;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: hidden; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<a href="#" class="card">
<img class="card-image" src="/storage/img/posts/64faf303a4eba.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="/storage/img/posts/64faf303a4eba.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="/storage/img/posts/64faf303a4eba.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
<script id="js-section">
</script></body></html>
ホバー時に180度回転するCSSカードデザイン
「transform-style: preserve-3d」で3Dにし「transform: rotateY(-180deg)」で回転させてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
position: relative;
cursor: pointer;
width: 30%;
height: 330px;
padding: 1rem;
box-sizing: border-box;
transform-style: preserve-3d;
perspective: 1000px;
}
.card-front,
.card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
text-align: center;
transition: 0.5s;
box-shadow: 0 0 10px #555;
}
.card-front {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
filter: brightness(80%);
transform: rotateY(0deg);
}
.card-back {
padding: 2rem 1rem;
color: white;
box-sizing: border-box;
transform: rotateY(180deg);
background-color: #353535;
}
.card:hover .card-front {
transform: rotateY(-180deg);
}
.card:hover .card-back {
transform: rotateY(0deg);
}
.card-title {
padding: 0.5rem 1rem;
font-size: 1.5rem;
font-weight: bold;
}
.card-description {
margin: 1rem 0 4rem;
line-height: 1.5;
}
.card-link {
padding: 1rem;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
transition: all .5s;
}
.card-link:hover {
background-color: #fff;
color: #333;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<div class="card">
<div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg')"></div>
<div class="card-back">
<h2 class="card-title">カードタイトル</h2>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
<div class="card">
<div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64dd3d12cdfb4.jpg')"></div>
<div class="card-back">
<h2 class="card-title">カードタイトル</h2>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
<div class="card">
<div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64dd3d11c3be3.jpg')"></div>
<div class="card-back">
<h2 class="card-title">カードタイトル</h2>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
</div>
</div>
</body></html>
ホバー時に概要が表示されるCSSカードデザイン
ホバー時に「max-height」プロパティの値を変更しています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
}
.card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-basis: 30%;
height: 320px;
padding: 1rem;
word-wrap: break-word;
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: #fff;
z-index: 0;
}
.card::before {
position: absolute;
inset: 0;
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
content: '';
z-index: -1;
}
.card-link {
position: absolute;
bottom: 2rem;
padding: 0.5rem;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
}
.card-title {
padding: 0.5rem 1rem;
margin:0;
font-size: 1.5rem;
font-weight: bold;
}
.card-description {
overflow: hidden;
height: 70px;
}
.card-description p {
margin:0;
transition: all 0.3s linear;
transform: translateY(70px);
line-height:1.5;
}
.card-link:hover {
background-color: #fff;
color: #333;
}
.card-link:hover~.card-description p {
transform: translateY(0);
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e45894867f4.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e46497f2da5.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e4643172f79.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
<div class="card-description">
<p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
</div>
</div>
</div>
</body></html>
影を入れたシンプルなCSSカードデザイン
「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: contain;
}
.card-box {
padding: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
ホバー時にグラデーションを入れたCSSカードデザイン
ホバー時に「before擬似要素」で画像にグラデーションを入れてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.7rem;
}
.card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-basis: 30%;
height: 340px;
word-wrap: break-word;
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor:pointer;
z-index: 0;
transition: .5s;
}
.card-title {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.card-link {
position: absolute;
bottom: 2rem;
padding: 0.5rem;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
}
.card:hover .card-link{
background-color: #fff;
color: #333;
}
.card:hover::before {
position: absolute;
inset:0;
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
content: '';
z-index: -1;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px;height: 368px;/* transform-origin: left top; *//* transform: scale(1); *//* overflow: auto; */margin: 0px;padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/6514e3b8de1fb.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e81123caca0.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
<div class="card" style="background-image:url('https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_640.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
</div>
</body></html>
カードの背景を画像にしたCSSカードデザイン
「style」属性で「background-image」を指定しています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style"></style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.7rem;
}
.card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-basis: 30%;
height: 340px;
word-wrap: break-word;
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
}
.card::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
content: '';
z-index: -1;
}
.card-title {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.card-link {
position: absolute;
bottom: 2rem;
padding: 0.5rem;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
transition: .5s;
}
.card-link:hover {
background-color: #fff;
color: #333;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px;height: 368px;/* transform-origin: left top; *//* transform: scale(1); *//* overflow: auto; */margin: 0px;padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/6514e3b8de1fb.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
<div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e81123caca0.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
<div class="card" style="background-image:url('https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_640.jpg')">
<h2 class="card-title">カードタイトル</h2>
<a href="#" class="card-link">詳細はこちら</a>
</div>
</div>
</div>
</body></html>
ホバー時にバウンドするCSSカードデザイン
「keyframes」で「transform:translateY」を調整しバウンドさせてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
gap: 1rem;
padding: 0.5rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 30%;
min-width: 0;
word-wrap: break-word;
background-color: #131D26;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
transition: .5s;
}
.card-image {
margin: 1.3rem;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.card-link {
width: 50%;
color: #333;
text-decoration: none;
}
.card-box {
width: 100%;
padding: 1rem;
box-sizing: border-box;
background-color: #62C69A;
color: white;
text-align: center;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card-link:hover .card {
animation: bounce 0.5s ease-out;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-20px);
animation-timing-function: ease-in;
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-10px);
animation-timing-function: ease-in;
}
100% {
transform: translateY(0);
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card-link">
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
<a href="#" class="card-link">
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
<a href="#" class="card-link">
<div class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
</div>
</div>
</body></html>
Glassmorphism（グラスモーフィズム）にしたCSSカードデザイン
「backdrop-filter」でグラスモーフィズムにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.container {
background-image: url('https://pa-tu.work/storage/img/posts/651682bc9fa7e.jpg');
background-size: cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100vw;
height: 100vh;
box-sizing: border-box;
padding: 9rem;
z-index: 0;
}
.card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
border: 2px solid rgba(255, 255, 255, .3);
background: rgba(232, 255, 255, .5);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
background-clip: border-box;
border: 0;
border-radius: 0.5rem;
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
transition: .5s;
width: 250px;
}
.card-image {
margin: 2rem;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.card-link {
color: #333;
text-decoration: none;
}
.card-link:hover .card {
box-shadow: 0 8px 32px 0 #353535;
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
}
.card-box {
padding: 1rem;
color: #333;
text-align: center;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="container">
<a href="#" class="card-link">
<div class="card pic-image">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
<a href="#" class="card-link">
<div class="card pic-image">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
<a href="#" class="card-link">
<div class="card pic-image">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
</div>
</body></html>
画像を上にずらしたCSSカードデザイン
「position: absolute;」で画像を上にずらしてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.5rem;
}
.card {
position: relative;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #2F2F2F;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
text-decoration: none;
}
.card-image {
position: absolute;
top: -1rem;
width: 90%;
height: 180px;
box-sizing: border-box;
border: 5px solid #fefefe;
border-radius: 5px;
object-fit: cover;
}
.card:hover .card-image {
border: 5px solid #e9ab30;
transition: .5s;
}
.card-box {
padding: 180px 1rem 1rem;
color: white;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
画像を半円で切り抜いたCSSカードデザイン
「clip-path」で画像を切り抜いてます。
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #efefef;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
transition: .5s;
text-decoration: none;
color: #333;
}
.card-image {
width: 100%;
height: 150px;
object-fit: cover;
clip-path: circle(150px at top);
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
.card-box {
padding: 1rem;
color: #333;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
画像を丸く切り抜いたCSSカードデザイン
「border-radius: 50%;」で画像を丸く切り抜いてます
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fefefe;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 0.5rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 30%;
word-wrap: break-word;
background-color: #131D26;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
text-decoration: none;
transition: .5s;
}
.card-image {
margin: 2rem;
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
.card-box {
padding: 1rem;
background-color: #62C69A;
color: white;
text-align: center;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>
画像・テキストを水平方向に配置したCSSカードデザイン
「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.card {
display: flex;
align-items: center;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0.25rem;
box-shadow: 0 10px 20px #ccc;
transition: 0.5s;
width: 600px;
}
.card-image {
width: 30%;
height: 100px;
object-fit: contain;
}
.card-box {
padding-left: 1rem;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card-link {
color: #333;
text-decoration: none;
}
.card-link:hover .card {
box-shadow: 0 5px 10px #ccc;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"></head><body id="svg-section" style="width: 900px; height: 368px; margin: 0px; padding: 0px;" class="vsc-initialized"><div class="pic-container">
<a href="#" class="card-link" target="_blank">
<div class="card pic-image">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/10/21/18/07/laptop-5673901_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</div>
</a>
</div>
</body></html>
境界線を入れたシンプルなCSSカードデザイン
ホバー時「box-shadow」で影を入れカードを浮かせたようにしています
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #f1f1f1;
}
.wrapper {
display: flex;
justify-content:center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 30%;
padding: 1rem;
word-wrap: break-word;
background-color: #fff;
box-sizing: border-box;
border-radius: 0.25rem;
border: 1px solid #cdcdcd;
color: #333;
text-decoration: none;
transition: 0.5s;
}
.card-image {
width: 100%;
object-fit: contain;
}
.card-box {
padding: 1rem 0;
}
.card-title {
margin-bottom: 0.5rem;
font-size: 1.2rem;
font-weight: bold;
}
.card-description {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.card:hover {
box-shadow: 0 10px 20px #999;
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style><link href="chrome-extension://nffaoalbilbmmfgbnbgppjihopabppdk/inject.css" type="text/css" rel="stylesheet"><style id="vsc-protection">body { pointer-events: auto !important; opacity: 1 !important; }.vsc-controller { display: none !important; }</style></head><body id="svg-section" style="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" class="vsc-ignore" data-vsc-ignore="true"><div class="pic-container">
<div class="wrapper">
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
<a href="#" class="card">
<img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
</div>
</a>
</div>
</div>
</body></html>