Checkbox card

Checkbox card

by Csaba Hellinger

HTML

<input type="text" placeholder="focus here, then TAB" /><br/><br/>

<label class="card">
  <input type="checkbox" />
  <div class="container">
    <img src="https://img.freepik.com/free-photo/stunning-square-portrait-adorable-cute-cat_181624-37290.jpg" alt="cat" />
    <svg class="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
      <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    </svg>
  </div>
  <div class="title">Cat</div>
</label>

CSS

.card {
  display: inline-block;
  background-color: #333;
  position: relative;
  border-radius: 0.2rem;
  width: 200px;
  box-shadow: 0 0 1rem #0008;
  cursor: pointer;
}

.card:hover {
  opacity: 0.8;
}

.card input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

label:focus-within,
label:active {
  outline: #005fcc auto 5px;
}

.container {
  position: relative;
  width: 100%;
  padding: 0.5rem;
  padding-bottom: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.2rem;
}

.check {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  opacity: 0;
  scale: 0.5;
  transition-property: opacity, scale;
  transition-duration: 250ms;
  transition-timing-function: ease-in;
  transform-origin: center;
  filter: drop-shadow(0 0 0.5rem #0008);
}

input:checked~.container .check {
  opacity: 1;
  scale: 1;
}

.title {
  text-align: center;
  padding-block: 0.5rem;
}

/* unrelated */

html,
body {
  background: #1f2227;
  color: #ddd;
  font-family: sans-serif;
  margin: 0.5rem;
}

input {
  background: #fff1;
  border: 1px solid;
}