# Transform your card collection into stunning photo galleries 🎞️

**URL:** https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292
**Category:** Community Resources
**Tags:** custom-css, collections
**Created:** [May 12, 2024, 4:11pm UTC](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292 "2024-05-12T16:11:03Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)
#### Post date: [May 12, 2024, 4:11pm UTC](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292/1 "2024-05-12T16:11:03Z")

</div>

🚀 Check this out, just some simple css can transform your card collection into a nice photo gallery

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/6/76ef442b9643a9ff097f357032e41a2a2f5d6d9f.jpeg "Glide Apps - Create interactive photo galleries") ](https://www.youtube.com/watch?v=4zgeF4zu61I)

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [May 12, 2024, 5:17pm UTC](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292/2 "2024-05-12T17:17:25Z")

</div>

Very nice.

Maybe you could include the CSS code for everyone and even add it to Thinh and Artsiom’s [CSS library](https://css-library.glide.page/dl/library)?

---

<div class="post-metadata">

### Author: ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)
#### Post date: [May 12, 2024, 5:38pm UTC](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292/3 "2024-05-12T17:38:29Z")

</div>

Here is the final css used in the video, i hope i didn’t miss anything. I gave the card collection component the class “gallery”

```auto
.gallery div[class*="StyledDiv2"][class*="card-collection-card"] {
  grid-gap: 0px;
}

.gallery div[class*="StyledDiv3"][class*="card-collection"]{
  border: 2px solid black;
  background-color: black;
}

.gallery div[class*="StyledDiv10"][class*="card-collection-card"] h3 {
  font-weight: 100;
  letter-spacing: -2px;
  font-size: 1.4rem;
  color: white;
  padding-bottom: 10px;
}

.gallery div[class*="StyledDiv10"][class*="card-collection-card"] p {
  color: #c9c9c9;
  letter-spacing: 0px;
  font-size: 0.9rem;
  display: none;
}

.gallery img {
  border-radius: 0px;
}

.gallery div[class*="StyledDiv4"]{
  border-radius: 0px;
}

.gallery div[class*="StyledDiv10"][class*="card-collection-card"]{
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 20px;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0, 0,0.9),rgba(0,0, 0,0.7), transparent);
  z-index: 10;
}

.gallery div[class*="StyledDiv6"]:hover {
  border: 2px solid gold;
}

.gallery div[class*="StyledDiv6"]:hover h3{
  color: gold;
}

.gallery div[class*="StyledDiv6"]:hover p{
  display: block;
}

.gallery div[class*="StyledDiv6"]:hover img{
  opacity: 0.3;
}

```

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [May 13, 2024, 12:21am UTC](https://community.glideapps.com/t/transform-your-card-collection-into-stunning-photo-galleries/73292/4 "2024-05-13T00:21:44Z")

</div>

That’s superb. Thank you for sharing.