Text overlay on blog grid?

Hi there, 

I'm looking to style a blog grid so that the title/subtitle text appears as an overlay on top of the photo. Right now I'm setting it up as a series of individual "poster" images. Is there a better way to do this / an easy setting I just need to change? I'd prefer to use something like a blog or gallery block if I could change the text.

I've attached a screenshot showing the default blog layout vs what I'm hoping to achieve.

Thanks, 

Emma

Update! It looks like a "portfolio overlay grid" element might work, in case anyone else is looking to do this.

Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution?

I'm attempting to achieve this on a Canson site 🤔

On 6/25/2022 at 5:54 PM, TimCc said:

Has anyone been successful in achieving this on a SS7.0 site? Or know a work-around/CSS solution?

I'm attempting to achieve this on a Canson site 🤔

If you share link to blog page on your site, we can give code to achieve this

On 7/1/2022 at 8:37 AM, tuanphan said:

If you share link to blog page on your site, we can give code to achieve this

Thanks @tuanphan! 

Link is https://tcooperphoto.com/frames/

Cheers

You are truly magical @tuanphan, Thanks so much!

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

On 7/11/2023 at 8:43 PM, Kellyx10 said:

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

You mean for Print & Digital Item?

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

Is that right?

Hi @tuanphan

Thanks for checking detail first : )

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

Is this possible ?

On 7/11/2023 at 8:43 PM, Kellyx10 said:

Hi @tuanphan

Sorry to jump in.
I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.
I tried to follow the above mentioned CSS code but it didn’t work. Would you mind to check my website and instruct me what shall I do?
https://www.the-plucx.com/work
Your kind help will be truly appreciated.

The url doesn't work now

@tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works 

I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

Your kind help will be truly appreciated.

On 7/23/2023 at 2:41 PM, Kellyx10 said:

@tuanphan Sorry, I accidentially revised the url name. Here it is: https://www.the-plucx.com/works 

I have the same requirement about the semi-clear overlay with white-text tile on blog grid thumbnails.

For PC views ↓

Initial: show image, hide title

Hover: show image, show title (over image), show an overlay over image

For Mobile views ↓

Initial: show image, show title

Hover: show image, show title (below image), show an overlay over image

 

Your kind help will be truly appreciated.

Add to Design > Custom CSS

/* Blig List - Hover Effect */
@media screen and (min-width:992px) {
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}
article.blog-basic-grid--container.entry.blog-item.is-loaded {
    position: relative !important;
    transform: unset !important;
}
.blog-basic-grid article:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}

.blog-basic-grid .image-wrapper:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.3s;
}

.blog-basic-grid article:hover .image-wrapper:after {
    opacity: 1;
    transition: all 0.3s;
}

.blog-basic-grid .image-wrapper {
    position: relative;
}}

Magic! Thank you so mcuh, @tuanphan 🙂

Sorry to jump in on this @tuanphan

i'm trying to achieve something similar.
im trying to move the HIERARCHY text box up to overlay the grid. 
essentially i would like the top of the text aligned with the top of the images .

i used the below css but when i viewed my page on a different monitor it appeared to be lower. 
see here

#block-360c253ea77246c3281e
{ top: -640px !important;
 

Site: https://groundhog-cow-f7s6.squarespace.com/

PW: hi

2 hours ago, WhoAJ said:

Sorry to jump in on this @tuanphan

i'm trying to achieve something similar.
im trying to move the HIERARCHY text box up to overlay the grid. 
essentially i would like the top of the text aligned with the top of the images .

i used the below css but when i viewed my page on a different monitor it appeared to be lower. 
see here

#block-360c253ea77246c3281e
{ top: -640px !important;
 

Site: https://groundhog-cow-f7s6.squarespace.com/

PW: hi

 

You mean overlay like this?

28 minutes ago, tuanphan said:

You mean overlay like this?

yes please sir @tuanphan

Add this code to Last Line in Code Injection > Footer

DO NOT add to Custom CSS

<script>
  $(document).ready(function(){
    $('div#block-360c253ea77246c3281e').insertBefore('.gallery-strips.gallery-strips--layout-strips');
});
</script>
<style>
  div#block-360c253ea77246c3281e {
    position: absolute;
    z-index: 99999;
    left: 50%;
    transform: translateX(-50%);
}
</style>

@tuanphanoh wow thank you very much. I just have one question. 
how can i scale down the size of the words to just cover the two centre photos? 
like the below photo

You can reduce size by adding this code under

<style>
  div#block-360c253ea77246c3281e span {
    font-size: 120px !important;
    text-align: center !important;
    display: block;
}
</style>

I see you changed left + transform attribute. Both attributes to keep text center

@tuanphan i was just messing with the attributes to see what effect they have so i can learn.
i changed them back to what you gave me 🙂

last last question how can i adjust height to make it lower or higher? fo future reference?

will mark this as solved and tag you in my other post .

You can add top attribute to this code

<style>
  div#block-360c253ea77246c3281e {
    position: absolute;
    z-index: 99999;
    left: 50%;
    transform: translateX(-50%);
    top: 50px;
}
</style>

@tuanphan hello sir , i remebered you helped me with an alignment issue above.

i have another issue i want to run by you.

on my product page the productitem-additional info box seems to be different sizes on different monitors. (13 inch and 15 inch laptop). so if i change the width it looks good on one and out of line on the other. see photos attached.

photo one from my 13 inch laptop it looks off. 
photo two it looks perfectly in line from adjusting in my css. Ideally if it were the same size as the add to cart button on any screen that would be great

https://capybera-krill-9nzw.squarespace.com/config/pages/website-tools/custom-css
pw: hi

code i used: 

.ProductItem-additional  {
  padding-left: 730px !important;
  margin-top: -140px !important;
  font-size: 15px !important;
  width: 35%;

thank. you

4 hours ago, WhoAJ said:

@tuanphan hello sir , i remebered you helped me with an alignment issue above.

 

i have another issue i want to run by you.

on my product page the productitem-additional info box seems to be different sizes on different monitors. (13 inch and 15 inch laptop). so if i change the width it looks good on one and out of line on the other. see photos attached.

 

photo one from my 13 inch laptop it looks off. 
photo two it looks perfectly in line from adjusting in my css. Ideally if it were the same size as the add to cart button on any screen that would be great

https://capybera-krill-9nzw.squarespace.com/config/pages/website-tools/custom-css
pw: hi

code i used: 

.ProductItem-additional  {
  padding-left: 730px !important;
  margin-top: -140px !important;
  font-size: 15px !important;
  width: 35%;

 

 

thank. you

/config is edit mode url. You can click arrow on top right or top left >> real product url will appear on browser address bar

2 hours ago, tuanphan said:

/config is edit mode url. You can click arrow on top right or top left >> real product url will appear on browser address bar

HI @tuanphan  
link below for one of my product pages 
https://capybera-krill-9nzw.squarespace.com/hierarchy-tees/p/relaxed-tee-grey