Log in to AnswerLog in to Follow
2022-03-17 19-52-29
Ana Andrade
21Views
4Comments
Solved
How can I put letters on top of an image
Question
Beginner
Hello, I wanted to put letters on top of an image that is on a carousel, and make them make a transition, i tried but it doesn´t allow me to put letters on top the image.
I wanted to put it like the image that attach.
Can anyone help me?
letra em cima da imagem.png

0
0
05 Mar
2021-06-02 20-50-04
Márcio Carvalho
Champion
Solution

You can create a component/block where you will give an image and the text you want to put. And then you can make the label element with position absolute to be above the image.

Look at this. You just need to create a block or customize it in a way that will solve your problem.

https://www.w3schools.com/howto/howto_css_image_text.asp

Let me know if you can do it.


I have made it in a block because every time you need to do that style you can do it by calling this block.

Kind Regards,

Márcio


labeloverimage.oml

0
0
05 Mar

Hi Ana Andrade ,

I made a demo explaining how to add text to an image.

As you can see the image has a text

This is a bit more complex because it is necessary to have a little knowledge of css.

We give you the absolute potion. and we indicate that it is in the middle of the height 50%

Recall that an absolute should be inside a relative container


A little more information
https://stackoverflow.com/questions/57232337/how-do-i-position-text-relative-to-the-image


the example is this:
https://www.outsystems.com/forums/discussion/76843/how-can-i-use-carousel-with-images/#Post317001

Greetings

TURISMOPE.oap

0
0
05 Mar

It's not a best practice to do inline styles, so I think we all should avoid showing or doing inline styles in our applications :)

Kind Regards

Márcio

0
0
05 Mar

Replying to Márcio Carvalho's comment on 05 Mar 2022 19:32:19

Hi Marcio Carvalho,

In particular only when a stylo will I reuse it in other elements. I register it in a class.


when for design reasons there are some attributes that require a specific padding or size and that is where I add style and outsystems do the same within their platform.

Now inside outsystems there are classes that have position:reactive and absolute


It would only be necessary to assign a middle-element class.

:3



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