ホバー時にホバーした部分だけ画像が拡大する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="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);
}
#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><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">
<div class="card-image-box">
<img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a3d626b.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/651c84a4494de.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/651c84a4b23fc.jpg">
</div>
<div class="card-box">
<h2 class="card-title">カードタイトル</h2>
<p class="card-description">カードの概要がここに入ります。</p>
</div>
</a>
</div>
<div id="hover-effect" style="left: 399px; top: 198px; display: none; background-size: 260px 200px; background-position: -79.1996px -171.698px; background-image: url("https://pa-tu.work/storage/img/posts/651c84a4494de.jpg");"></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: auto; 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="width: 900px; height: 368px; transform-origin: left top; transform: scale(1); overflow: auto; margin: 0px; padding: 0px;" 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: auto; 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: auto; 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></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">
<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;
font-size: 1.5rem;
font-weight: bold;
}
.card-description {
overflow: hidden;
height: 70px;
}
.card-description p {
transition: all 0.3s linear;
transform: translateY(70px);
}
.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カードデザイン
「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></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/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;
}
.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;
box-shadow: 0 10px 20px #ccc;
transition: .5s;
}
.card-image {
margin: 2rem;
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"></head><body id="svg-section" style="width: 600px; height: 450px; transform-origin: left top; transform: scale(1);" class="vsc-initialized"><div class="pic-container">
<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>
</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;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
position: relative;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
flex-basis: 48%;
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: 11rem;
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: 11rem 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"></head><body id="svg-section" style="width: 600px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto;" 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/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;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
}
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-basis: 48%;
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: 230px;
object-fit: cover;
clip-path: circle(65% 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"></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">
<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>
</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"></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/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"></head><body id="svg-section" style="width: 900px; height: 450px; transform-origin: left top; transform: scale(1); overflow: auto;" class="vsc-initialized"><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>