Card display with horizontal scrolling
I really like the Popular This Month section on the CSS-Tricks homepage, and I have wanted to try and build something similar to what they’ve done. It was fun to work on, but there are quite a few things I need to improve before adding something like it to a site. I enjoy trying to rebuild bits of other websites I see. It’s a fun challenge and I learn a lot in the process.
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
Card Header
Text...
Jeremy Caudle
View the code:
HTML and JS
<div class="code-block">
<div class="horz-scroll-box">
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
<div>
<h2>Card Header</h2>
<p>Text...</p>
<h3>
<img src="https://jeremycaudle.com/ygg/resources/onebitme.png" alt="Jeremy Caudle" width="64" height="56">
Jeremy Caudle
</h3>
</div>
</div>
</div>CSS
.code-block {
width: clamp(16em, 90vw, 60em);
padding: 1rem;
margin: 1rem auto;
background-color: rgb(0, 99, 99);
border-radius: .5rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: relative;
color: #454545;
}
.horz-scroll-box {
padding: 2rem 2rem 2rem 4rem;
border-radius: .5rem;
background-color: rgb(0, 99, 99);
height: 20em;
max-height: 20em;
overflow-x: scroll;
overflow-y: hidden;
scrollbar-color: rgb(80, 190, 190) aqua;
}
@supports (display: flex) {
.horz-scroll-box {
display: flex;
}
.horz-scroll-box div {
display: flex;
flex-flow: column;
}
}
.code-block::after {
display: block;
content: '';
width: 6px;
height: 17em;
position: absolute;
top: 2em;
right: 1rem;
border-radius: 8px;
background-color: rgb(0, 99, 99);
z-index: 2;
}
.horz-scroll-box div {
min-width: 36ch;
height: 100%;
background-color: rgb(57, 255, 255);
padding: 1rem 1rem 4rem 1rem;
border-radius: 1rem;
margin-left: -4rem;
transition: transform .125s ease-out, margin .125s ease-out;
box-shadow: -1rem 0 1rem 0 rgba(0, 0, 0, 0.5);
}
.horz-scroll-box div:first-child {
margin-left: 3rem;
}
.horz-scroll-box div:hover {
transform: rotate(2.5deg) translate(-1rem, -.25rem);
margin: 0 3rem 0 0;
}
.horz-scroll-box div:last-child:hover {
transform: rotate(2.5deg) translate(-1rem, -.25rem);
margin: 0 0 0 -6rem;
}
.horz-scroll-box div h2, .horz-scroll-box div p {
margin-top: 0;
}
@supports (display: grid) {
.horz-scroll-box h3 {
display: grid;
place-self: bottom;
margin: 0;
align-items: center;
grid-template-columns: min-content 1fr;
}
.horz-scroll-box h3 img {
border-radius: 50%;
font-size: .5rem;
font-weight: 200;
color:rgba(0, 0, 0, 0.5);
text-align: center;
vertical-align: middle;
background-color: white;
border: solid 3px rgb(0, 146, 146);
margin-right: .5rem;
}
}