Hide and show the product title which is coming over the image

Question

Hi iam working on a shopify website , here is the link https://i6g770fcpgv7w1o8-53431074968.shopifypreview.com/, the help I want is to show the title of the product which is coming over the image only on hover of the product image, can please some one guide me

 
<style>
          span#tit_pro {
  display: none;
}
    
.ProductItem__LabelList:hover + span#tit_pro {
  display: block;
  color: red;
}
        </style>

<span id="tit_pro">MYSHA FUCHSIA SCHIFFLI-ORGANZA DRESS</span>
<span class="ProductItem__Label Heading Text--subdued">New</span>

Provide more details, like your code, so we can help you properly. — Dobromir Kirov, Jan 20 '22 at 07:14
It's not very clear what you want. Do you want the title to appear over the image only when the user hovers or do you want the title to be over the image all the time? If you go into your browser dev tools you can find the relevant HTML for one product perhaps and out of that create a code snippet to put into your question. — A Haworth, Jan 20 '22 at 07:21
Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Sfili_81, Jan 20 '22 at 07:42

score 0 · Answer 1 · answered Jan 20 '22 at 08:09

You're using adjacent sibling selector (+) and that's why you don't see desired result. Since span#tit_pro is not adjacent sibling of your .ProductItem__LabelList it won't work. You can either use child selector (>) or just use descendant selector.

I think this should solve your problem:

<style>
span#tit_pro {
  display: none;
}
    
.ProductItem__LabelList:hover > span#tit_pro {
  display: block;
  color: red;
}
</style>

Hide and show the product title which is coming over the image

1 Answers1