7.1 image hover on blog post title

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!