🎞 2. Transforming Card Collection into a Slide-In Carousel with CSS

Community Resources
, ,
14

@Sekayi_Liburd, If you use text, remove this part:

ScreenRecording2024-05-16at14.09.32-ezgif.com-crop

Rotate Text

/*VERTICAL TEXT*/
.cardousel .horizontal > div {
  flex-direction: row;
}
.cardousel .horizontal > div > div > div:nth-child(2) {
  position: absolute;
  right: 105px;
  width: calc(2/3 * 100%);
  min-width: calc(2/3 * 100%); /* Aspect ratio used */
  top: 0px;
  padding:15px;
  transform: rotate(-90deg) translateY(0%);
  transform-origin: top right;
  background: rgba(0, 0, 0, 0.5);
}
.mobile-layer .cardousel .horizontal > div > div > div:nth-child(2) {
  position: absolute;
  right: 86px;
  top: 0px;
  padding:10px;
  width: calc(2/3 * 100%); /* Aspect ratio used */
  transform: rotate(-90deg) translateY(0%);
  transform-origin: top right;
  background: rgba(0, 0, 0, 0.5);
}
/*Meta Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 100%; /*Don't change it*/
font-size: 2rem;
text-align: right;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 100%; /*Don't change it*/
font-size: 1.0rem;
text-align: right;
white-space:nowrap;
overflow: hidden;
}
/*Title Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
  width: 100%; /*Don't change it*/
font-size: 2rem;
text-align: left;

}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
width: 100%;  /*Don't change it*/
font-size: 1.5rem;
text-align: left;
white-space:nowrap;
overflow: hidden;
}

/*Description Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(3){
width: 100%;  /*Don't change it*/
font-size: 1.5rem;
text-align: center;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(3){
width: 100%;  /*Don't change it*/
font-size: 1.0rem;
text-align: right;
white-space:nowrap;
overflow: hidden;
}
3 Likes