cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
mattkiss1711
Advocate I
Advocate I

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

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?

1 ACCEPTED SOLUTION

Accepted Solutions
CarlosFigueira
Power Apps
Power Apps

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.

GalleryTransitionPop.gif

Hope this helps!

View solution in original post

5 REPLIES 5
aprildunnam
Power Participant
Power Participant

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
Power Apps
Power Apps

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.

GalleryTransitionPop.gif

Hope this helps!

View solution in original post

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. 

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
New Member

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.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Users online (1,829)