How to give a hover effect with a slow fading effect to images in the UI

Scenario:

While hovering using the mouse above the image, the image needs to reduce its opacity and fade with a smooth transition.

Solution

We can add the following CSS property to that specific image class in the CSS file.

Code:

.product-image2:hover{
  opacity: 0.6; // Adjust the opacity as needed
  transition: opacity 300ms ease; // Adjust the transition duration as needed
}