pdh-design-system/dist/css/organisms/Slide/Slide.css

PDH Design System React Components

.anim-slide {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.anim-slide > :first-child {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.anim-slide > :first-child > img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: center top;
}
.anim-slide > :first-child > .card-header {
  overflow: hidden;
  height: 5.45rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.anim-slide > :nth-child(2) {
  display: block;
  transition-property: transform, opacity;
  transition-duration: 0.25s;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 100;
  top: 100%;
  color: #fff;
  background-color: var(--bs-primary);
  border: 0 none;
  opacity: 0;
}
.anim-slide:hover > :nth-child(2), .anim-slide:focus > :nth-child(2) {
  transform: translateY(-100%);
  opacity: 1;
}