Close

Ribbon CSS for hover

baltavarna
3 months ago
#22389 Quote
Avatar
  • 3
Hello,

How can we change product ribbon on mouse hover ?

With CSS ? Is there any way to do that.

Thanks!
harshchandra
3 months ago
#22391 Quote
Avatar
  • Moderator
  • 9
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;
}
Regards,
Nop-Templates.com Team
baltavarna
3 months ago
#22393 Quote
Avatar
  • 3
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
harshchandra
3 months ago
#22394 Quote
Avatar
  • Moderator
  • 9
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.
Regards,
Nop-Templates.com Team