Ribbon CSS for hover

Hello,

How can we change product ribbon on mouse hover ?

With CSS ? Is there any way to do that.

Thanks!

Hello
Are you using Ribbon text or the images? For the text ribbons, you can target class product-ribbon which is the parent div for any ribbons.

Example:
.product-ribbon:hover {
    background: red !important;
}

harshchandra,

Thank you so much for your answer, I have already done this, and it works.

Now I have one more question, hope somebody will help me with that.

How to write CSS for those ribbon icons to put it to the list like in example (
https://ibb.co/Nymk4Df ) ? THANKS IN ADVICE

I think the best way will be to create a ribbon image like the one shown in the example rather than doing it as a ribbon text.