ホバー時にホバーした部分だけ画像が拡大する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(&quot;https://pa-tu.work/storage/img/posts/651c84a4b23fc.jpg&quot;); 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></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; 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></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カードデザイン

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