diff --git a/addons/rating/static/src/scss/rating_templates.scss b/addons/rating/static/src/scss/rating_templates.scss
index 0429aea41f6..bbd4cb23b91 100644
--- a/addons/rating/static/src/scss/rating_templates.scss
+++ b/addons/rating/static/src/scss/rating_templates.scss
@@ -6,6 +6,7 @@
         margin-left: 0 !important;
     }
     .o_rating_label {
+        opacity: 0.5;
         &:hover {
             transform: scale(1.1);
         }
@@ -18,9 +19,8 @@
     }
 
     .btn-check:checked + .o_rating_label {
-        filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
-        -webkit-filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
-        transform: scale(1.1);
+        transform: scale(1.2);
+        opacity: 1;
         img {
             &.bg-white:hover,
             &.bg-white:focus {
diff --git a/addons/rating/views/rating_templates.xml b/addons/rating/views/rating_templates.xml
index 3917dea3a3d..860e2834d42 100644
--- a/addons/rating/views/rating_templates.xml
+++ b/addons/rating/views/rating_templates.xml
@@ -36,7 +36,8 @@
                                            t-att-for="'rate_%s' % (rate_name)">
                                         <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.svg'
                                              t-att-alt="rate_name_value"
-                                             t-att-title="rate_name_value"/>
+                                             t-att-title="rate_name_value"
+                                             t-attf-class="o_{{rate_name_value.lower()}}"/>
                                     </label>
                                 </t>
                             </div>