Answered

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

(1) Share

Report

Posted on by 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?

Categories:

Building Power Apps

I have the same question (0)

All responses (9)

Answers (1)

aprildunnam 704 on at

Like (2)

Report

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%)

Screen Shot 2018-...

Was this reply helpful? Yes No
Verified answer

CarlosFigueira on at

Like (8)

Report

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!

Was this reply helpful? Yes No
Kavzz 34 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
CarlosFigueira on at

Like (7)

Report
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

ForumThread103472...

Was this reply helpful? Yes No
Alireza_K 2 on at

Like (0)

Report

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.

Hover_gallery.png

Was this reply helpful? Yes No
ursNani 215 on at

Like (0)

Report

@mattkiss1711

please vote here
https://powerusers.microsoft.com/t5/Power-Apps-Ideas/Hover-amp-Unhover-which-can-update-other-controls-and-properties/idi-p/103843

Was this reply helpful? Yes No
AkshayR 13 on at

Like (0)

Report

This Will Help - https://www.linkedin.com/posts/matthew-devaney-6499271b7_powerapps-activity-7058450995147640832-0JYe?utm_source=share&utm_medium=member_desktop

Was this reply helpful? Yes No
nikk_diamond 14 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Abdiel35 17 on at

Like (0)

Report

Excellent suggestion it actually works

Was this reply helpful? Yes No