Jump to content

7.1 image hover on blog post title

Recommended Posts

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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, brianrolfephoto said:

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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

 

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment
  • 5 months later...
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 😢 

Edited by Marya
Link to comment
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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

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.

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

image.png.9e27128ec3282993dbb108a43de6db1f.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.