Recently a client asked how to give an image shown in a Xojo web app a hover effect. Basically a few WebImageView controls show various pictures and you need to pick one. When the mouse moves over the images, we like to highlight the image by making it darker or brighter.

We quickly thought how to do it:

• in Xojo directly, there is no property and no MouseEnter/MouseExit events. But the server round trip would make this quite slow anyway.
• in JavaScript would be faster and run in the browser. Like install mouse event handler and then swap out the image for a darker version.
• in CSS is the best as the browser does it and we benefit from any graphics acceleration. And CSS doesn't need to swap the image and just darken it with an effect.

Our solution now is to add the following style defintion to app.HTMLHeader property:

<style>
.DarkHover
{
  transition: all 0.2s ease-in-out;
}
.DarkHover:hover
{
  filter: brightness(50%);
}
</style>

This defines the CSS class named "DarkHover" with two things. First we define a transition of 0.2 seconds for any change, so the object fades. Second we define a filter to apply in hover state to reduce brightness to half.

Next each control receiving the hover effect needs to add the CSS class above.

This just adds the class and now the browser applies the above style automatically on top of whatever theme you use. You can run this in the Opening event of the control. If you like to use it in a lot of controls, you could subclass the relevant class and overwrite the Opening event there.

Enjoy and let us know if you have a question.