Image text overlay hover

Site URL: https://lilac-harmonica-rczt.squarespace.com

Hello, could someone help me with the CSS code where the words over my images on homepage only show up if they are hovered upon? I did set images to "poster."

Link to website is https://lilac-harmonica-rczt.squarespace.com/ 

Thank you!

Jeanette

Hello there, try this CSS Code 

.design-layout-poster .image-title *{
  visibility:hidden;
  opacity:0;
transition-duration: 2s}

.design-layout-poster:hover .image-title *{
  visibility:visible;
  opacity:1;
}

Thank you for suggesting the code, but it didn't work for me.  I appreciate your help, though!

Jeanette

2 hours ago, blix said:

Thank you for suggesting the code, but it didn't work for me.  I appreciate your help, though!

Jeanette

 

Add to Home > Design > Custom CSS

body.homepage .design-layout-poster .image-card-wrapper * {
    opacity: 0;
}
body.homepage .design-layout-poster:hover .image-card-wrapper * {
    opacity: 1;
}

Thank you so much, that worked!

On 1/2/2021 at 7:44 AM, blix said:

Thank you so much, that worked!

I see on tablet, newsletter is off-center. Do you want to center it?

and add to cart issue on tablet\

Add to Home > Design > Custom CSS

/* tablet add to cart */
@media screen and (max-width:991px) and (min-width:768px) {
div.sqs-add-to-cart-button {
    width: 100% !important;
}
}

Hello and thank you. I am still working on the site and things may look wonky but I did not realize that the newsletter was not centered. Thank you so much for providing the code!