Hello all,
Trying to figure out how to change the color of the background of an image on mouse hover. Here is an example of what I am trying to
I want to do something like the social media icons in the upper left-hand corner at the top. When you move your mouse over them, their background changes color. Any tips would be much appreciated! Thank you so much!
Here is my public share link: LINK
(how to access public share link)
Hey @ErichBoehm
Best way is to use font-awesome icons to control the icons color on hover as well.
Can you share your read-only link?
Piter 
Hi @ErichBoehm,
I made a quick screen recording:
You could use that interraction to target the icon div instead of the actual big div i used.
Like @PeterDimitrov mentioned, a read-only link would be easier for us to help you out 
Hope that helps
I am looking for something that changes the background color of the icon for as long as the user hovers the mouse over. Is this possible?
Of coures that would be possible. However, which icons are you refering to ? I can’t see any icon on the read-only link. Are you reffering to the navigation link at the top ?
Hello,
I am referring to the social media icons at the top above the Navbar. Much appreciated!
My confusions centers on the event duration. The only options I am seeing on my end are time-dependant, rather than something that just is based on what the user is hovering over.
@ErichBoehm - If you are posting a share link, then making changes afterwords, like removing the elements, it makes it very difficult for members here to assist you. It is better for the rest of us when you just clone your project and then share the link to the clone. That way we are not left in the woods.
If that was not the case, I apologize in advance.
No problem. I could have looked.
I looked at the design for these elements and the bar. I can see you are experimenting. I normally find it easier to isolate elements to work issues out. Hard to do when there are lots of plates spinning.
Looking at your bar, you are using unnecessary margins and positioning. This could be simplified by grouping the elements into divs where the parent is using flex.
I created a demo for you. It uses flex and demonstrates manipulating the hover color with interactions and without them, using the hover state and transitions. Aside from a vertical border, I think this is close to what you want. Use this as a design pattern.
