portfolio/src/pages/index.module.css

.title {
  font-size: var(--font-size-h4);
  opacity: 0;
  position: absolute;
  top: 15%;
  left: 0;
  margin: 0;
  z-index: 2;
  padding: calc(var(--spacer) / 3) var(--spacer);
  color: #fff !important;
  background: var(--link-color);
  transform: translate3d(0, -1rem, 0);
  transition: transform 0.2s ease-out;
}

.project {
  display: block;
  position: relative;
}

.project:hover .title,
.project:focus .title,
.project:hover .imageCount,
.project:focus .imageCount {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.imageCount {
  position: absolute;
  bottom: 5%;
  right: 2%;
  color: var(--brand-cyan);
  font-size: var(--font-size-small);
  z-index: 10;
  opacity: 0;
  transform: translate3d(0, calc(var(--spacer) / 2), 0);
  transition: transform 0.25s ease-out;
}

.imageCount svg {
  width: var(--font-size-base);
  height: var(--font-size-base);
}