Is there anyway to create a hover or mouse over control?

[mattkiss1711]

I have a screen where the user must make a selection between 2 images. I would like to have a "spotlight" or an image/icon appear to give the user a visual indicator of their choice. (Maybe an arrow that appears below the image) when the user hovers over the image. When the user clicks the image, then it will navigate to the next screen.

There doesn't appear to be any sort of OnHover property. Is there a workaround?

[aprildunnam]

There is a "Hover Fill" or "Hover Border Color" properties for images that you could set to have some kind of hover effect.   Here's an example of the formula you would use:

ColorFade(RGBA(166, 166, 166, 1), 50%) 

[CarlosFigueira · Accepted solution]

Currently the only configuration you can for individual controls on mouse over is to update their color (border / fill / color) - you cannot update other controls or change other properties on hover/"unhover" events.Please consider creating a new feature request in the PowerApps Ideas board for that.

One feature that may be useful is the Transition property in the gallery. If you have your images as items in a collection that you display in a gallery, you can set that property and the cell that has the mouse over will have a push or pop effect. For example, see the example below for a gallery with a Pop effect.

Hope this helps!

[Kavzz]

Hi,

Can you give more description on how to do it?

The gif you have added is my exact requirement.

Since I am new to PowerApps, can't quite follow how to do it. 

[CarlosFigueira]

The attached app shows how this can be done. To open it, save it locally, then go to https://create.powerapps.com, select Open, Browse, and find the file that you previously saved.

The steps I took to build that app:

• Create a new (blank app)
• Added 4 images (via the File menu, Media option)
• Added a horizontal gallery (which has an image, and two text fields)
• Removed the 2 text fields, leaving the image only
• Set the Items property of the gallery to reference the added images:
  • ['dog-2890078_640';'cute-3281232_960_720';'Cute-Bunny-Pictures-1';'hedgehog-1215140_640']
• Selected the image control inside the gallery, and set its Image property to ThisItem.Value
• Resized the image / gallery so that all images would fit
• Selected the gallery control, set its Transition property to Transition.Pop

Hope this helps!

- 

You need to insert a gallery with a single image control inside of it, set the Items property of the gallery to the list of images that you want to display

[Alireza_K]

You can use HoverFill Property of the Gallery Items. suppose you have an column with an image inside of it. you can set the HoverFill property of that image as below: (i am setting the color based on the Header of my page)

If(ThisItem.IsSelected, ColorFade(HeaderLabel.Fill,75%),ColorFade(HeaderLabel.Fill,90%))

but you can use any color for example:

If(ThisItem.IsSelected, Red,Blue)

see the attachment for UI.