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?
Excellent suggestion it actually works
It's obvious that Microsoft would not release such an option soon.
If you need to hoover over a picture that should be used as a button, then you can do it yourself with a little trick.
1. Put a button over the picture (or any other control) with the same size.
2. Delete text of the button.
3. Set its color to "transparent" in order to see the picture below.
4. Set the button's border color the same as the background and the size of the border to 5 px (you can play with this size for receiving the desired effect).
5. Set HoverBorderColor to transparent.
In this way you'll "take" 5 px from every side of the picture (if you're willing to sacrifice them for the sake of this effect), but when hover over the picture it will appear with its full size making the protruding effect.
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.
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:
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
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.
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!
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%)
WarrenBelz
146,522
Most Valuable Professional
RandyHayes
76,287
Super User 2024 Season 1
Pstork1
65,890
Most Valuable Professional