Site URL: https://brianrolfe.co.uk/main-home

Is there any way to have a blog post in 7.1 have the title show on hover over the image instead of under it?

On 6/9/2022 at 6:27 AM, brianrolfephoto said:

Site URL: https://brianrolfe.co.uk/main-home

Is there any way to have a blog post in 7.1 have the title show on hover over the image instead of under it?

I can't find blog page on your site. Can you share link to blog page?

On 6/11/2022 at 9:34 AM, tuanphan said:

I can't find blog page on your site. Can you share link to blog page?

sorry yes... https://brianrolfe.co.uk/blog-2

I believe blog summary blocks are a bit more flexible, easier to change with code. I have changed my blog posts listing quite radically using blog summary blocks but I don't have the title above the image on hover. I do have an image hover effect however. 

 my random views

12 hours ago, brianrolfephoto said:

sorry yes... https://brianrolfe.co.uk/blog-2

Add to Design > Custom CSS

/* Blig List - Hover Effect */
.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:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}

2 hours ago, tuanphan said:

/* Blig List - Hover Effect */
.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:hover .blog-basic-grid--text {
    opacity: 1;
    transition: all 0.3s;
}

Thanks! Really appreciate it! Is there any way to make that work like this site? https://www.justinpolkey.com

I don't see any hover effects on the site you posted. What about that site do you wish to have on yours?

2 hours ago, derricksrandomviews said:

I don't see any hover effects on the site you posted. What about that site do you wish to have on yours?

 

If you move your cursor over the image on that site the title comes up and the image has a white overlay on it. That's how I'd like to get my blog post images working.

10 hours ago, brianrolfephoto said:

If you move your cursor over the image on that site the title comes up and the image has a white overlay on it. That's how I'd like to get my blog post images working.

 

You mean

Initial: Show image only

Hover: Show overlay, show title over overlay

Is this right?

12 minutes ago, tuanphan said:

You mean

Initial: Show image only

Hover: Show overlay, show title over overlay

Is this right?

Yes exactly 🙂

23 hours ago, brianrolfephoto said:

Yes exactly 🙂

Add this new code to Design > Custom CSS

/* Blig List - Hover Effect */
.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;
}

6 hours ago, tuanphan said:

Add this new code to Design > Custom CSS

/* Blig List - Hover Effect */
.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;
}

 

LEGEND!! Amazing, thank you so much!!

On 6/15/2022 at 5:27 AM, tuanphan said:

Add this new code to Design > Custom CSS

/* Blig List - Hover Effect */
.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;
}

 

@tuanphan Is this possible to do with the Masonry Blog? I'm having a difficult time finding the right CSS selectors 😢 

On 11/23/2022 at 3:17 AM, Marya said:

@tuanphan Is this possible to do with the Masonry Blog? I'm having a difficult time finding the right CSS selectors 😢 

With Blog Masonry, use this code

/* Blog Masonry - Hover */
.blog-masonry .blog-item-summary {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}.blog-masonry .masonry-ready .entry:hover .blog-item-summary {
    opacity: 1;
    transition: all 0.3s;
}

.blog-masonry .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-masonry .masonry-ready .entry.is-loaded:hover .image-wrapper:after {
    opacity: 1;
    transition: all 0.3s;
}

.blog-masonry .image-wrapper {
    position: relative;
}

Hello Tuanphan,

I just found what I was looking for, great to have the overlay effect on the blog post titles, which I use as a portfolio landing page. I want now to get the same effect for the "latest works" that I have in a summary block in the home page. If you could share how to do it it would be a great help.

www.murustudios.squarespace.com
pw: 1111

Thank you so much.

On 5/23/2023 at 6:04 AM, mikelmuruzabal said:

Hello Tuanphan,

I just found what I was looking for, great to have the overlay effect on the blog post titles, which I use as a portfolio landing page. I want now to get the same effect for the "latest works" that I have in a summary block in the home page. If you could share how to do it it would be a great help.

www.murustudios.squarespace.com
pw: 1111

Thank you so much.

I see you figured it out?

Hey Tuan, yes, we're still working on it but we achieved the effect, thank you!

On 11/25/2022 at 3:58 AM, tuanphan said:

With Blog Masonry, use this code

/* Blog Masonry - Hover */
.blog-masonry .blog-item-summary {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
}.blog-masonry .masonry-ready .entry:hover .blog-item-summary {
    opacity: 1;
    transition: all 0.3s;
}

.blog-masonry .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-masonry .masonry-ready .entry.is-loaded:hover .image-wrapper:after {
    opacity: 1;
    transition: all 0.3s;
}

.blog-masonry .image-wrapper {
    position: relative;
}

 

This is amazing @tuanphan!

I'm trying to adapt your code to also work for a grid summary block and have had no luck. Could you take a look? 
https://asparagus-violet-6yxl.squarespace.com/wedding-florals

PW: ADMIN
 

On 12/7/2023 at 4:51 AM, E-W said:

This is amazing @tuanphan!

I'm trying to adapt your code to also work for a grid summary block and have had no luck. Could you take a look? 
https://asparagus-violet-6yxl.squarespace.com/wedding-florals

PW: ADMIN
 

Use this code

[data-section-id="6570a96517265f7189fa0492"] {
.summary-content.sqs-gallery-meta-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 999;
}
.summary-content.sqs-gallery-meta-container * {
    text-align: center !important;
}
.summary-thumbnail-outer-container:after {
    content: "";
    background: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.summary-item:hover .summary-content.sqs-gallery-meta-container {
    opacity: 1;
}
.summary-item:hover .summary-thumbnail-outer-container:after {
    opacity: 1 !important;
    transition: all 0.3s;
}}

On 12/8/2023 at 8:21 PM, tuanphan said:

Use this code

[data-section-id="6570a96517265f7189fa0492"] {
.summary-content.sqs-gallery-meta-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 999;
}
.summary-content.sqs-gallery-meta-container * {
    text-align: center !important;
}
.summary-thumbnail-outer-container:after {
    content: "";
    background: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.summary-item:hover .summary-content.sqs-gallery-meta-container {
    opacity: 1;
}
.summary-item:hover .summary-thumbnail-outer-container:after {
    opacity: 1 !important;
    transition: all 0.3s;
}}

 

Amazing! Thank you!!!

On 12/8/2023 at 7:21 PM, tuanphan said:

Use this code

[data-section-id="6570a96517265f7189fa0492"] {
.summary-content.sqs-gallery-meta-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0;
    z-index: 999;
}
.summary-content.sqs-gallery-meta-container * {
    text-align: center !important;
}
.summary-thumbnail-outer-container:after {
    content: "";
    background: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.summary-item:hover .summary-content.sqs-gallery-meta-container {
    opacity: 1;
}
.summary-item:hover .summary-thumbnail-outer-container:after {
    opacity: 1 !important;
    transition: all 0.3s;
}}

 

Is there any way to make this work for a carousel summary block? I tried to paste this into my site but its not working correctly... its the home page

maracas-red-fm92.squarespace.com

On 2/8/2024 at 3:52 AM, designsbyem said:

Is there any way to make this work for a carousel summary block? I tried to paste this into my site but its not working correctly... its the home page

maracas-red-fm92.squarespace.com

Don't remove your current code. Use this code to Custom CSS

.summary-item:hover .summary-content.sqs-gallery-meta-container {
    opacity: 1;
}
.summary-thumbnail-outer-container:after {
    content: "";
    background: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.summary-item:hover .summary-content.sqs-gallery-meta-container {
    opacity: 1;
}

On 6/15/2022 at 5:27 AM, tuanphan said:

Add this new code to Design > Custom CSS

/* Blig List - Hover Effect */
.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;
}

 

Is there a way to do this but in reverse? So blog title appears as an overlay and then disappears on hover? Also...how to center text in the blog thumbnail? 

Your code is always supreme! Thanks

I tried using the carasoul summry block code however the text shows on top of the image the whole time and then when you hover you can just see it better. Please see below and let me know what I should try instead! Thanks so much 

www.modernformcreative.ca

On 3/28/2024 at 11:33 AM, TheVibe said:

Is there a way to do this but in reverse? So blog title appears as an overlay and then disappears on hover? Also...how to center text in the blog thumbnail? 

Your code is always supreme! Thanks

Use this code, if it doesn't work, you can share link to blog page, I can check easier

/* Blig List - Hover Effect */
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 1;
    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: 0;
    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: 1;
    transition: all 0.3s;
}

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

On 3/30/2024 at 10:51 PM, tifflee said:

I tried using the carasoul summry block code however the text shows on top of the image the whole time and then when you hover you can just see it better. Please see below and let me know what I should try instead! Thanks so much 

 

www.modernformcreative.ca

I don't see Summary on Homepage. Which page are you referring to?