Jump to content

Create a Text overlay on gallery or summary block

Recommended Posts

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.

Link to comment

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Screenshot_5.thumb.png.5e3e2f7d405fd9bf5c28c96bebb31a22.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.