Play-Thumbnail

.card-098 {
  display: block;
  width: 300px;
  text-decoration: none;
  color: #111827;
  font-family: system-ui,sans-serif
}
.card-098__thumb {
  position: relative;
  display: block;
  height: 170px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#312e81,#7c3aed 60%,#db2777)
}
.card-098__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: #111;
  transform: translate(-50%,-50%) scale(.9);
  padding-left: 3px;
  transition: transform .25s,background .25s
}
.card-098:hover .card-098__play {
  transform: translate(-50%,-50%) scale(1.05);
  background: #fff
}
.card-098__dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600
}
.card-098 b {
  display: block;
  margin: 10px 0 2px;
  font-size: 15px;
  line-height: 1.35
}
.card-098:hover b {
  color: #7c3aed
}
.card-098 small {
  font-size: 12px;
  color: #6b7280
}
.card-098 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<a class="card-098" href="#">
  <span class="card-098__thumb">
    <span class="card-098__play"><svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span>
    <span class="card-098__dur">12:04</span>
  </span>
  <b>Building a flip card with zero JavaScript</b>
  <small>designforai · 18k views</small>
</a>