Create a Text overlay on gallery or summary block

Site URL: https://lenexis-foodworks.squarespace.com/

site pw: lenexis

I'm trying to create something like https://cartesianconsulting.com/#team for the team section on this site. I want the image and title to appear as the sample site and then the person's bio to appear when clicked upon. Is there any easy way to achieve this or should I just purchase a plug in?

Any guidance will be appreciated. Thanks.

Hi,

You will need to use a plugin to make Lightbox feature. You can consider this Lightbox plugin. (affiliate link)

In case you don't want to use plugin, you can use custom code, however you'll need quite a bit of tweaking, I created a simple lightbox for a similar question in the Circle Forum yesterday, you can check it out here (pass abc) (this is lightbox, with hover effect, we will need to adjust some code). If you like this, I'll send the code and instructions.

@tuanphan Hi Tuanphan,

Thanks for your response. I did purchase this plug in https://ghostpluginssuper.squarespace.com/claro-summary-block , and I like the way it shows. The only problem is I want 4-5 images to be displayed and the rest should show upond scrolling like so https://cartesianconsulting.com/#team

The plug in uses the summary block list feature. Can you help me tweak this pls?

19 hours ago, atfirstblink said:

@tuanphan Hi Tuanphan,

 

Thanks for your response. I did purchase this plug in https://ghostpluginssuper.squarespace.com/claro-summary-block , and I like the way it shows. The only problem is I want 4-5 images to be displayed and the rest should show upond scrolling like so https://cartesianconsulting.com/#team

The plug in uses the summary block list feature. Can you help me tweak this pls?

How about this?

https://thung.squarespace.com/claro-list-section-ghost?noredirect

pass: abc

On 7/5/2022 at 2:06 PM, tuanphan said:

 

this is perfect. How do I do this?

How about this?

https://thung.squarespace.com/claro-list-section-ghost?noredirect

pass: abc

Just now, atfirstblink said:

 

@tuanphanThat should work. How do I do this?

First, add a List Section (Design: Carousel, Padding: 0 for all)

Next, add this code to Page Header, page where you added List

<style>
.user-items-list-carousel .list-item h2 {
    color: white !important;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 20px !important;
}

.user-items-list-carousel .list-item p {
    color: #808080;
    margin-top: 1px;
    margin-bottom: 1px;
}

.user-items-list-carousel .list-item a {
    color: #41d88f !important;
    text-decoration: none;
}
  .list-item-content {
    transform: translateY(100px);
    background-color: #242424 !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0 !important;
    padding: 0 !important;
    transition: all 0.5s ease-in-out !important;
}
  .user-items-list-carousel .list-item {
    position: relative !important;
    pointer-events: initial !important;
}
  .list-item-content>div {
    padding: 10px 20px;
}
  .user-items-list-carousel__media-inner {
    padding-bottom: 150% !important;
}
.list-item-content__description {
    margin-top: 0 !important;
}
  li:hover .list-item-content {
    transform: translateY(0);
    transition: all 0.5s ease-in-out !important;
}
</style>