Jump to content

Image White overlay with title

Recommended Posts

  • Replies 7
  • Views 443
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Where are you trying to do this? Can you share your website and the page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, johnnaslaby said:

Sorry for the confusion, is this your website or an example of what you want it to look like?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy

Yes! This is my website. 

These are the two pages I want to change:

https://johnnaslaby.com/store 

https://johnnaslaby.com/art

And I want to make the images like this page on my site: https://johnnaslaby.com/journal

I had to put the code in there for that one but I don't know how to make it so that I have the same effect for the store page as well. 

This is the code that I used for the /journal page I believe:

/* show title on hover */
.blog-basic-grid--text {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}
/* show overlay on hover */
.blog-item .image-wrapper:after {
    position: absolute;
    content: "";
    background: rgba(255,255,255, 0.9);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .image-wrapper:after {
    opacity: 1;
}

.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
}
article {
    position: relative;
}

Link to comment
On 12/13/2022 at 9:39 AM, johnnaslaby said:

 

Yes! This is my website. 

These are the two pages I want to change:

https://johnnaslaby.com/store 

https://johnnaslaby.com/art

And I want to make the images like this page on my site: https://johnnaslaby.com/journal

I had to put the code in there for that one but I don't know how to make it so that I have the same effect for the store page as well. 

This is the code that I used for the /journal page I believe:

/* show title on hover */
.blog-basic-grid--text {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .blog-basic-grid--text {
    opacity: 1;
}
/* show overlay on hover */
.blog-item .image-wrapper:after {
    position: absolute;
    content: "";
    background: rgba(255,255,255, 0.9);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}
.blog-item:hover .image-wrapper:after {
    opacity: 1;
}

.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
}
article {
    position: relative;
}

Add overlay color only or overlay + text?

If overlay + text, can you add some demo text first? I Currently don't see any text on /art page

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan

Hi there! Yes the text that I would like to add to those pages are the names of the artwork along with some smaller details to the bottom when you hover over the images. How do you think I could go about making that work?

 

For example, I would like my pages:

https://johnnaslaby.com/art

https://johnnaslaby.com/store 

to look like this:

https://heatherday.com/2022

Edited by johnnaslaby
Link to comment
On 12/18/2022 at 4:33 PM, johnnaslaby said:

@tuanphan

Hi there! Yes the text that I would like to add to those pages are the names of the artwork along with some smaller details to the bottom when you hover over the images. How do you think I could go about making that work?

 

For example, I would like my pages:

https://johnnaslaby.com/art

https://johnnaslaby.com/store 

to look like this:

https://heatherday.com/2022

Hi,

Hover on each image >> Show a white overlay + text (product name?)? I don't see any text, can you add some text? or remove code which you used to hide text?

image.thumb.png.c9c7bcba386448657c9ebbb5313855c3.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.