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

**URL:** https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400
**Category:** Community Resources
**Tags:** custom-css, tutorial, custom-code
**Created:** [May 15, 2024, 1:07pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400 "2024-05-15T13:07:51Z")
**Posts on this page:** 1
**Showing post:** 14

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 16, 2024, 6:32am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/14 "2024-05-16T06:32:03Z")

</div>

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

> [@Himaladin](#):
>
> ```auto
> .cardousel [data-testid="cc-card"] > div {
> padding:0;
> flex-direction: row;/*Not contain text. Delete if using text*/
> gap: 0px;
> }
> 
> ```

![ScreenRecording2024-05-16at14.09.32-ezgif.com-crop](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88beccc0bcc457dc0af10c4d3d867344afc47dfd.gif)

### Rotate Text

* * *

```auto
/*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;
}

```

---

_[View the full topic](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400)._