Can you apply a glow or shadow effect specifically around the outline of a PNG image on hover using Webflow?

Published on
September 22, 2023

Yes, you can apply a glow or shadow effect specifically around the outline of a PNG image on hover using Webflow. The steps to achieve this are:

  1. Select the PNG image element in Webflow Designer by clicking on it.
  2. In the Styles panel on the right-hand side, click on the "+" icon next to "Effects" to add a new effect.
  3. Choose either "Glow" or "Shadow" from the list of available effects.
  4. Adjust the settings of the effect to your liking by modifying properties such as color, size, and intensity.
  5. Make sure to set the "Initial state" properties to define how the image should appear before the hover effect is triggered.
  6. Now, switch to the "Hover" state in the Styles panel by clicking on the hover icon next to "Effects".
  7. Adjust the properties of the effect for the hover state, such as increasing the size or intensity, to create the desired emphasis on hover.
  8. Preview the website to see the glow or shadow effect around the outline of the PNG image when you hover over it.

By following the above steps, you can easily add a glow or shadow effect specifically around the outline of a PNG image on hover using Webflow.

Example CSS for a glow effect:

img:hover {  box-shadow: 0 0 10px #ffffff;}

Example CSS for a shadow effect:

img:hover {  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);}

Please note that the above CSS examples are generic and need to be applied carefully within the Webflow Designer.