-
  const ITEMS = [
    {
      title: 'Impossible Checkbox',
      link: "https://codepen.io/jh3y/pen/LYNZwGm",
      src: "https://assets.codepen.io/605876/impossible-checkbox.png"
    },
    {
      title: "Newton's Light Bulbs",
      link: "https://codepen.io/jh3y/pen/abzeaWJ",
      src: "https://assets.codepen.io/605876/newtons-lightbulbs.png"
    },
    {
      title: "Pure CSS Tic Tac Toe",
      link: "https://codepen.io/jh3y/pen/BVaGKP",
      src: "https://assets.codepen.io/605876/css-tic-tac-toe.png"
    },
    //- {
    //-   title: "Cards Against Developers",
    //-   link: "https://codepen.io/jh3y/pen/JZbKpp",
    //-   src: "https://assets.codepen.io/605876/cards-against-developers.png"
    //- },
    {
      title: "Turbo Kitty",
      link: "https://codepen.io/jh3y/pen/bGEBKoy",
      src: "https://assets.codepen.io/605876/turbo-kitty.png"
    },
    //- {
    //-   title: "Glitchy CSS Text",
    //-   link: "https://codepen.io/jh3y/pen/jOOQjYP",
    //-   src: "https://assets.codepen.io/605876/cards-against-developers.png"
    //- }
    {
      title: "Pure CSS Drawers",
      link: "https://codepen.io/jh3y/pen/mLaXRe",
      src: "https://assets.codepen.io/605876/css-drawers.png?format=auto"
    },
    {
      title: "CSS 3D Studio Room",
      link: "https://codepen.io/jh3y/pen/XWdQBRx",
      src: "https://assets.codepen.io/605876/3d-studio-room.png"
    },
    //- {
    //-   title: "T-Shirt Cannon Button",
    //-   link: "https://codepen.io/jh3y/pen/eYpmBxQ",
    //-   src: "https://assets.codepen.io/605876/t-shirt-cannon.png"
    //- },
    {
      title: "Code Name: RamBear",
      link: "https://codepen.io/jh3y/pen/QWyYZbP",
      src: "https://assets.codepen.io/605876/rambear.png"
    },
    {
      title: "Care Bear Needs Love",
      link: "https://codepen.io/jh3y/pen/RwPrOoz",
      src: "https://assets.codepen.io/605876/care-bear-needs-love.png"
    },
    {
      title: "HSL Dimmer Switch",
      link: "https://codepen.io/jh3y/pen/MWYJPwZ",
      src: "https://assets.codepen.io/605876/hsl-dimmer.png"
    },
    {
      title: "Tuggable Light Bulb",
      link: "https://codepen.io/jh3y/pen/VwjgdLj",
      src: "https://assets.codepen.io/605876/tuggable-lightbulb.png"
    }
  ]

.top-picks
  h1.top-picks__title Top 10 in Jhey's Pens Today
  ul.top-picks__track
    for ITEM, index in ITEMS
      li.item.top-picks__item
        a.item__card(href=ITEM.link target="_blank" rel="noopener noreferrer")
          img(src=ITEM.src)
          span= ITEM.title

View Compiled
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

*
*:before
*:after
  box-sizing border-box
  font-family 'Roboto', sans-serif

// Card measure was 165 x 240
// Font-size was about 110
// Card margin was about 60
:root
  --bg hsl(0, 0%, 8%)
  --size 50vmin
  --height var(--size)
  --width calc(0.6875 * var(--size))
  --font-size calc(0.74 * var(--size))
  --gap calc(0.22 * var(--size))


body
  background var(--bg)
  min-height 100vh
  display flex
  align-items center
  justify-content start
  font-family 'Roboto', sans-serif


.top-picks
  max-width 100%
  padding 0 2rem

  &__track
    height var(--height)
    margin 0
    padding 0
    display flex
    list-style-type none
    padding 0 var(--gap)
    max-width 100%
    overflow-x auto
    overflow-y visible
    counter-reset index
    scroll-snap-type x mandatory
    

  &__title
    color hsl(0, 0%, 100%)
    font-size clamp(1.2rem, 5vmin, 3rem)
    font-weight 700

  &__item
    overflow hidden
    width calc(var(--width) + var(--gap))
    flex 0 0 calc(var(--width) + var(--gap))
    position relative
    list-style none
    counter-increment index
    padding-left var(--gap)
    scroll-snap-align center
    
    &.item:hover
      img
        filter saturate(100%)

    .item__card
      width var(--width)
      position absolute
      right 0
      top 0
      bottom 0
      border-radius 2vmin
      background hsl(0, 0%, 14%)
      overflow-x hidden
      
      &:after
        position absolute
        content ''
        bottom 1rem
        right 1rem
        height 1.5rem
        width 1.5rem
        background-image url("https://assets.codepen.io/605876/avatar.png")
        background-size cover
        background-repeat no-repeat

      img
        position absolute
        height 100%
        width 100%
        object-fit cover
        transition filter 0.2s
        filter saturate(50%)

      span
        text-decoration none
        position absolute
        top 2rem
        right 2rem
        max-width 50%
        text-align right
        color white
        font-weight bold
        font-size clamp(1rem, 2vmin, 2rem)
        text-shadow 0.5vmin 0 2vmin var(--bg)

    &:after
      content counter(index)
      position absolute
      color var(--bg)
      font-size var(--font-size)
      line-height 0.7
      bottom 0
      font-weight bold
      letter-spacing -5vmin
      left 0
      -webkit-text-stroke 0.5vmin hsl(0, 0%, 100%)
      text-shadow 1vmin 0 4vmin var(--bg)
      transform translate(-14%, 0)



View Compiled
// Nope

// Inspecting the original shows how they are clipping the numbers
// Check the card border-radius and see how the "2" is clipped
// https://twitter.com/CodePen/status/1329534673987506184?s=20

// Made this one with scroll-snap and took some of my demos and put them in ;D
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.