Image White overlay with title

Hi everyone!

I want to change the images so that there is a whiter overlay and then have the title be on top like this:

https://johnnaslaby.com/journal

Thank you!

Johnna

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

@Ziggy

Hi! Thanks for the message. Apologies, I thought the site was attached already!

Trying to do it with this page:

https://johnnaslaby.com/store

-Johnna 

1 hour ago, johnnaslaby said:

https://johnnaslaby.com/store

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

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

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

@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

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?