how to view a content when hover on image
Question
Application Type
Reactive

 This is an image that when i hover on it show me a content at the bottom. I'm trying to find a widget that can do this task.
any suggestions ? :)

Champion
Solution

Dear Lina

Please find the attached OML. 

Please Note: I have created one Web Block with Image Placeholder "ImageOverlay". You will need to drag this web block wherever you want to use the Image with same style. Also, the content is from Expression. So, you can use it dynamic as well. 


Please feel free to ask if you face any issues regarding CSS or its working. 

Here is demo: https://personal-9qwkrkgl.outsystemscloud.com/ImageOverlayTitle/Screen1?_ts=637558349735359286 

ImageOverlayTitle.oml


Hello @Lina Abushammala, I think a widget like that, could be the tooltip but will not do it the same way you want, but I have created one solution and you can try that! You have here the oml, where when you hover the image it shows you the content at the bottom. 

Regards,

Márcio C.

imageOnHoverCustomComponent.oml

That's great @Marcio Carvalho but I think it will be a good idea if it's for one photo.
But in my scenario it well be a lot of photos with content that adding dynamically.

Many thanx :)

Welcome :)

Can you share what you really want, because from what you said in the question's description, it was not very clear. And from what you wrote, my solution can do what you want, even using the javascript, because with the component I created, you can put in a list and you can use with more than an image from what I understand. See that, I just used CSS and HTML, it was a simple solution to a simple "problem".

Thanks :)

Regards,

Márcio C.

Champion

Dear Marcio 

Thanks for your response here and for my comment too. We appreciate your efforts but please never try to demotivate any OutSystems Aspired for their inputs. 


I saw in my email in one of the comment you tried to push Lina to accept the solution you have shared. Also, you disagree my comment that was the solution for the Lina's requirement. 


I have a kind request to you if these demotivational action could be prevent to maintain the Community Forum Ethics. Overall, we all have equal intensions to help all community members with the thoughts. 


I hope you can understand :)


Many Thanks  

Yes, of course! :) thank you for your comment too :)

Good job

Regards,

Márcio C.

Champion

Hello Lina 

You can achieve the same using the JS and HTML. If you want I can do the Forge for you or simply share the working OML that you can use in your application. 

Please confirm if the below reference will work for you - 

Before Hover


After Hover


Did you check my reply above, even the OML? And saw what I did there? :) 

Cheers


Manish Gupta

This sounds great, can you Share the OML please :) 

Champion

Sure Lina, Thanks. 

I will create the OML for the same and share with you. I will do this with the Web Block that you can use with any numbers of images. 

Champion
Solution

Dear Lina

Please find the attached OML. 

Please Note: I have created one Web Block with Image Placeholder "ImageOverlay". You will need to drag this web block wherever you want to use the Image with same style. Also, the content is from Expression. So, you can use it dynamic as well. 


Please feel free to ask if you face any issues regarding CSS or its working. 

Here is demo: https://personal-9qwkrkgl.outsystemscloud.com/ImageOverlayTitle/Screen1?_ts=637558349735359286 

ImageOverlayTitle.oml

Champion

Thanks Lina. I have created the Forge for the same as well: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=10834 


Hope everyone can use this :) 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.