Blog page image hover with title

@tuanphan any idea why its not done it for this page?...

https://crane-burgundy-rnlt.squarespace.com/allmusic

It has different code structure, so above code won't work on allmusic page

@tuanphan ah ok thanks

@tuanphan I am trying to achieve the same effect, using that code gave me the box I was looking for, but the titles are still showing up under the thumbnail. I am still using the trial Squarespace (using 7.1) so I don't believe I can share with you what I am looking at. Is there anything you can do without seeing the site?

On 2/4/2021 at 6:25 AM, spacecowboy said:

@tuanphan I am trying to achieve the same effect, using that code gave me the box I was looking for, but the titles are still showing up under the thumbnail. I am still using the trial Squarespace (using 7.1) so I don't believe I can share with you what I am looking at. Is there anything you can do without seeing the site?

You can setup password & share site url. 

On 5/13/2020 at 9:18 PM, tuanphan said:

Add to Home > Design > Custom CSS

.blog-basic-grid--text {
    position: absolute;
    width: 100% !important;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    opacity: 0;
    background: transparent !important;
}
.blog-basic-grid--text * {
    color: white !important;
}
.blog-item a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    transition: all 0.25s;
    opacity: 0;
}
article.blog-item:hover a:after {
    opacity: 1;
}
article.blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}

 

Hi @tuanphan!

I'm trying to achieve a similar style on my Portfolio page:

https://nestologystudio.squarespace.com/portfolio

pw: kB39gwHAP

I basically want to hide the Blog title & category and just have it shown upon hover (like attached)

Thank you for your help!

On 3/11/2021 at 3:20 PM, KeraG said:

Hi @tuanphan!

I'm trying to achieve a similar style on my Portfolio page:

https://nestologystudio.squarespace.com/portfolio

pw: kB39gwHAP

I basically want to hide the Blog title & category and just have it shown upon hover (like attached)

Thank you for your help!

 

Hi. Incorrect password. Can you check it again?

On 3/20/2021 at 8:52 PM, tuanphan said:

Hi. Incorrect password. Can you check it again?

Hello @tuanphan, I am fortunate enough to have been able to find this thread! I believe I have sort of the same question as the person above.

My page is still on trial while I attempt to see if Squarespace is my next move, but you can access it here https://finch-turquoise-95bd.squarespace.com/ with the password tester

Under the tab tracks, I have done the original effect of the hover fade on the blog post photo, which you can see, but I would like to know if it is possible to also add the title of the blogpost to the hover effect instead of having it under or above the photo itself. Hopefully, you might have an answer, but I appreciate the help anyways!

On 3/26/2021 at 6:34 AM, andyvcoolio said:

Hello @tuanphan, I am fortunate enough to have been able to find this thread! I believe I have sort of the same question as the person above.

My page is still on trial while I attempt to see if Squarespace is my next move, but you can access it here https://finch-turquoise-95bd.squarespace.com/ with the password tester

Under the tab tracks, I have done the original effect of the hover fade on the blog post photo, which you can see, but I would like to know if it is possible to also add the title of the blogpost to the hover effect instead of having it under or above the photo itself. Hopefully, you might have an answer, but I appreciate the help anyways!

Hi,

First remove your hover code

Next, let me know. I will check & give the new code

On 2/5/2021 at 3:56 AM, tuanphan said:

You can setup password & share site url. 

My apologies @tuanphan I didn't have notifications on and just saw this, I appreciate your reply. I was able to get it to work but just posted a follow up here

10 hours ago, spacecowboy said:

My apologies @tuanphan I didn't have notifications on and just saw this, I appreciate your reply. I was able to get it to work but just posted a follow up here

Just answered. You can check.

Hey ! It would be awesome if this code work on 7.0 because I need it on my blog grid list but, I dont find a similar code for. Can you help me ? 

18 hours ago, idflow said:

Hey ! It would be awesome if this code work on 7.0 because I need it on my blog grid list but, I dont find a similar code for. Can you help me ? 

Each template in SS 7.0 needs a different code. Can you share link to blog list on your site?