Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at the three images below the blog posts, you'll notice the issue. When hovering over them, the image opacity changes as intended. However, there is also supposed to be text appearing in the center of each image, which is no longer happening. Despite using the same code as before, the text is not displaying as expected. Any ideas on why this may be happening? Here's the CSS code I'm using:
span.text-content, span.text-content-bags {
color: #ffffff;
font-size: 30px;
left: 0px;
opacity: 0;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
}
span.text-content span, div.homepage-bags span.text-content-bags span {
left: 0px;
margin-top: -12px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
opacity: 1;
display: inline-block;
}