Transform your card collection into stunning photo galleries 🎞️

Community Resources
,
1

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

9 Likes
2

Very nice.

Maybe you could include the CSS code for everyone and even add it to Thinh and Artsiom’s CSS library?

1 Like
3

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”

.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;
}
6 Likes
4

That’s superb. Thank you for sharing.

1 Like