Jump to content

Image White overlay with title

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@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

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

@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

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.